Как изменить CSS на мобильной версии сайта

Как изменить CSS на мобильной версии сайта


 Привет ! Сегодня вы узнаете как можно изменить CSS стили на мобильной версии сайта. Вы можете сделать так, чтобы изменённые стили отображались только на мобильном устройстве. Вы можете указать максимальный размер экрана, на котором будут отображаться изменённые CSS стили.

 

Пример CSS стилей для мобильных устройств:

 

@media screen and (max-width: 650px) {
.post-item .post-title {
margin: 10px;
padding: 9px;
font-weight: bold;
}
}

 

Разберём стили:

1 строчка — здесь показана максимальная ширина экрана, на которой будут отображаться данные CSS стили.

2 строчка — название элемента, который вы хотите изменить.

3,4,5 строчка — CSS стили.

В конце обязательно должны быть две закрывающие скобки.

 

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

 

 Как изменить CSS стили на сайте WordPress:

SiteOrigin CSS

Simple Custom CSS

Custom CSS Pro

 

Остались вопросы ? Напиши комментарий ! Удачи !

 



Как изменить CSS на мобильной версии сайта обновлено: Апрель 18, 2017 автором: Илья Журавлёв

Комментарии

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *



Яндекс.Метрика

Правила - Карта - Связь

Стрелка вверх