Центр Div на планшетах

Question

Сайт: https://dev.momentinaboxclub.com/ Область: О блоке

Я хочу, чтобы этот столбец центрировался на мобильных устройствах.В настоящее время я использую этот CSS в медиа-запросе:

.about-box {
   width: 90%;
   margin: 0 auto;
}

Кажется, он работает на мобильных телефонах, но на планшетах коробка перемещается влево.Я не могу понять, почему это не будет в центре.Пожалуйста, помогите.

Спасибо!

Answer 1

В медиазапросе есть float: left для этого элемента, который влияет на размеры планшета и в вашем случае применяется к классу .vc_col-sm-8 с минимальной шириной 768 пикселей.

Просто добавьте float: none; к своему правилу CSS для этого элемента.

Answer 2

В вашем HTML-файле есть div, у которого есть свойство: width: 66.66666667%;. Если вы измените это значение на width: auto;, ваша проблема будет решена, однако она избавится от розовой границы вокруг текста. Если вы добавите эту строку в ваш CSS-файл, это должно исправить проблему с выравниванием.

.wpb_column.vc_column_container.vc_col-sm-8.vc_col-has-fill {
    width: auto;
    }

Надеюсь, это поможет!

Answer 3

Добавьте display: flex; к .full_section_inner, только для средних устройств, которые должны работать!

@media only screen and (min-width: 768px) and (max-width: 992px){
    .full_section_inner{
        display: flex;
        justify-content: center;
    }
}