Jump to content
Sign in to follow this  
eskaaaaaaaaaa

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

Recommended Posts

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

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

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

Share this post


Link to post
Share on other sites

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

 

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

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

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

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

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

Share this post


Link to post
Share on other sites

Посмею продолжить тему, есть вп шаблон express,  установил лого, как его адаптировать на все устройства? Спасибо за ваши старания.

уж слишком обширный вопрос.

Share this post


Link to post
Share on other sites

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

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

<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");
}
}

Share this post


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.

Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...