Jump to content

wordpress адаптивный логотип


Recommended Posts

Привет друзья, столкнулся с проблемой, поставил на вордпресс тему "quickpress theme"

С телефона она немного уходит в права, за экран, как сделать его адаптивный на всех устройствах?

Всю яшу обыскал. Спасибо.

Link to post
Share on other sites

Я косяки правлю так:

 

1) открываю сайт в Мозилле или Хроме, уменьшаю окно браузера до размеров мобильника

2) для элементов, у которых плывет верстка нажимаю "исследовать элемент" и смотрю исходный код и стили

3) находил нужный класс элемента в файлах стилей именно для данного разрешения, начинается с @media ..., если менять размер окна содержимое css в инспекторе кода тоже меняется

4) методом тыка правлю прямо в инспекторе кода стили, чтобы все правильно отображались

5) нахожу файл стилей в теме и вношу то, что менял уже туда

Link to post
Share on other sites
  • 1 month later...
  • Модератор

Как вариант адаптивного лого.

В теле шаблона:

<div id="logo"></div>

в CSS подключаем картинки разных размеров согласно разрешению экрана у пользователя

@media only screen and (max-width: 1000px) {
#logo {
background: url("logo1.png")
}
}

@media only screen and (max-width: 600px) {
#logo {
background: url("logo2.png");
}
}

@media only screen and (max-width: 300px) {
#logo {
background: url("logo3.png");
}
}
Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...