Центрирование текста только на мобильных устройствах - PullRequest
Новая
       13

Центрирование текста только на мобильных устройствах

2 голосов
/ 28 января 2020

Я довольно плохо знаком с продвинутым CSS. У меня есть пользовательский раздел заголовка, который я хочу сделать сосредоточенным только на мобильном телефоне. Я добавил имя класса и следующий код, но ничего не произошло. 

.mobile-text {
  text-align: right;
}

@media (max-device-width: 600px) {
  .mobile-text {
    text-align: center;
  }
}

Это домашняя страница этого сайта, и абзац следующий:

НЕДВИЖИМОСТЬ, КОТОРАЯ ВЫЗЫВАЕТ НОРМЫ И ЛИШАЕТ ОЖИДАНИЯ. ЭТО ЦВЕТНОЕ МЫШЛЕНИЕ В ЧЕРНОМ И БЕЛОМ МИРЕ.

Ответы [ 4 ]

1 голос
/ 28 января 2020

max-device-width предназначается для ширины всей области устройства (то есть экрана устройства). Вместо этого используйте max-width, который нацелится на ширину всей области браузера. 

@media (max-width: 600px) {
  .mobile-text {
    text-align: center;
  }
}

Примечание: device-width запросы устарели .

0 голосов
/ 28 января 2020

Когда я проверяю html вашей страницы, я вижу class="" этого <h4>: 

class="vc_custom_heading .mobile-text wpb_animate_when_almost_visible wpb_right-to-left right-to-left vc_custom_1580217248411 wpb_start_animation animated"

В вашем css вы хотите манипулировать им, используя .mobile-text учебный класс. Проблема здесь в том, что вы определяете этот класс в вашем html, используя .mobile-text. Это на самом деле неправильно, вам нужно определить его только с помощью mobile-text, например: 

class="vc_custom_heading mobile-text wpb_animate_when_almost_visible wpb_right-to-left right-to-left vc_custom_1580217248411 wpb_start_animation animated"

. . - это на самом деле селектор css для такого класса, как # - селектор для идентификатора. .

0 голосов
/ 28 января 2020

Ваш класс на сайте - .mobile-text, и он должен быть mobile-text - . используется только в селекторах, чтобы сказать, что следующий текст является именем класса

Кроме того, ваш встроенный Стили элемента (style=font-size: 35px... etc) перезаписывают ваши изменения - вы можете использовать !important, чтобы обрабатывать это лениво 

.mobile-text {
  text-align: right !important;
}

@media (max-device-width: 600px) {
  .mobile-text {
    text-align: center !important;
  }
}
0 голосов
/ 28 января 2020

Ваш медиазапрос не работает на рабочем столе, если вы проверяете в представлении рабочего стола.

А также ваше объявление class неверно, удалите . из mobile-text. :) 

max-width is the width of the target display area, e.g. the browser

max-device-width is the width of the device's entire rendering area, i.e. the actual device screen

Пожалуйста, используйте @media all и (max-width: 600px) {}

Для получения более подробной информации посетите здесь

Надеюсь, это поможет вам. :)

...