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

Как изменить 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

 

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

 

   
Добавить комментарий для Витя Отменить ответ

  1. Наталья

    Илья, спасибо! У меня получилось сделать для ПК – одну версию хедера, для мобильников – другую! Просто преклоняюсь перед Вами)))) Всю информацию беру у Вас! Извините, если я слишком часто задаю вопросы – Вы единственный, кто так оперативно отвечает и подсказывает. Спасибо-спасибо!!! :)
    …Уже немного и в код стала залезать – это супер! А еще недавно о сайтах и не мечтала))

    Ответить
    1. Admin автор

      Вы молодец, рад за вас, удачи вам) Пишите, если будут вопросы, чего-нибудь посоветую)

      Ответить
  2. Елизавета

    Из этой темы нечего полезного для себя не нашла. Всё как не знала изменить моб.версию, так и не знаю,только зря потраченное время.

    Ответить
    1. Admin автор

      Добрый день. Что конкретно вы хотите изменить на мобильной версии? С первого раза конечно сложно понять, тем более если вы новичок в этом деле.

      Ответить
  3. Витя

    Я хочу изменить стиль, создать css правило для браузеpа Firefox. Какое приложение нужно установить для этого на телефон?

    Ответить
    1. Admin автор

      Где именно хотите стиль изменить?

      Ответить
  4. Maga

    Здравствуйте, у меня некорректно отображаются заголовки сайта aromafortuna. com на мобильнике. Подскажите, что можно сделать, в каком css файле нужны изменения?

    Ответить
    1. Admin автор

      Добрый день. В чём именно проявляется некорректность?

      Ответить
      1. Maga

        Очень мелкий шрифт, трудно читается, хотя прописала 28px, текст статей 14px – смотрится нормально на мобильнике. Что посоветуете?

      2. Admin автор

        Можно прописать в CSS размер шрифта отдельно для десктопа и мобильной версии. Нужно использовать специальный CSS код для изменения стилей на мобильном