Блог

Я не могу изменить заполнение для одного элемента на мобильных устройствах. Запросы работают для нескольких свойств, но заполнение не будет работать (как и высота строки, если я попытаюсь это использовать). Базовый стиль в пользовательском css:

 #topright {
font-size: 20px;
    letter-spacing: 4px;
    color: rgba(255,255,255,1.0);
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    font-weight: 200;
}
 

Медиа-запрос для телефона

 /* Custom, iPhone Retina */ 
 @media only screen and (min-width : 320px) {
        .header-2 .logo  {
    width: 250px;
    }   
    .footer-widget ul li {
            width: 100%;
    }
    .footer-widget ul {
    padding-left: 0;
    padding-right: 0;
    }
    div.vc_column-inner vc_custom_1476556729591 {
    padding-left: 0;
    padding-right: 0;
    }
    .footer-widget .textwidget p {
        text-align: center;
    }
    #topright {
    padding-top: 1px;
    padding-bottom: 1px
    }   
}
 

Меньший номер заполнения не будет применен. Если я удалю !important из основного css, тогда телефонный запрос будет применен ко всем устройствам. Это странно, потому что все остальные свойства для телефонного запроса работают нормально.

С этой полезной страницы, посвященной медиа-запросам, min-width: 320px означает:

 "If [device width] is greater than or equal to 320px, then do {...}"
 

Другими словами, медиа-запрос, который, как вы думаете, вы создали для таргетинга только на iPhone, на самом деле будет выполняться для всех устройств, ширина которых составляет 320 пикселей или больше. Вместо этого, я думаю, вы намеревались использовать max-width

Так что используйте этот CSS:

 /* Custom, iPhone Retina */ 
@media only screen and (max-width : 320px) {
    .header-2 .logo  {
        width: 250px;
    }   
    ...
    #topright {
        padding-top: 1px;
        padding-bottom: 1px
    }
}
 

И вы также должны удалить !important директивы из вашего main.css файла.