• ДОБРО ПОЖАЛОВАТЬ В КЛУБ ПО WORDPRESS

    Мы активно растущий клуб по WordPress и нам нужна помощь каждого человека, в том числе и Ваша! Не стесняйтесь и станьте частью большого сообщества.
    Мы делимся новостями, отытом и полезными советами! Пройдите простую регистрацию, чтобы пользоваться всеми возможностями нашего клуба.

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

Вопрос Адаптация сайта под смартфон

Orrs

ПРОВЕРЕННЫЙ

Orrs

ПРОВЕРЕННЫЙ
Сообщения
17
Добрый день!
Использую тему Nirvana
Главная страница разделена на строки по четыре колонки в каждой. В каждой колонке кликабельная картинка отсылающая на нужную страницу. Если делать картинки с настройкой по ширине, то в версии ПК все отлично. Все картинки одинаковые и все красиво. Но, в мобильной версии каждая колонка растягивается на ширину экрана и картинки соответственно. В итоге картинка занимает весь экран. Следующая картинка находится под ней и тд. Если повернуть экран горизонтально, то ширина становится еще больше. То есть по сути, в мобильной версии строка разворачивается вертикально и растягивается на ширину экрана.
Как сделать, чтобы в адаптивной версии страница осталась разделенной на колонки горизонтально?
Причем на планшете все работает как надо.. То есть на телефоне картинки в итоге в два раза больше, чем на планшете
Спасибо!
 

Wildcdu

ЭКСПЕРТ

Wildcdu

ЭКСПЕРТ
Сообщения
1,120
Добрый день!
Использую тему Nirvana
Главная страница разделена на строки по четыре колонки в каждой. В каждой колонке кликабельная картинка отсылающая на нужную страницу. Если делать картинки с настройкой по ширине, то в версии ПК все отлично. Все картинки одинаковые и все красиво. Но, в мобильной версии каждая колонка растягивается на ширину экрана и картинки соответственно. В итоге картинка занимает весь экран. Следующая картинка находится под ней и тд. Если повернуть экран горизонтально, то ширина становится еще больше. То есть по сути, в мобильной версии строка разворачивается вертикально и растягивается на ширину экрана.
Как сделать, чтобы в адаптивной версии страница осталась разделенной на колонки горизонтально?
Причем на планшете все работает как надо.. То есть на телефоне картинки в итоге в два раза больше, чем на планшете
Спасибо!
Как самый простой вариант. Изменить в стилях адаптивную верстку. Например отключить изменения для мобильного, или задать другие параметры. Например перенести стиль из планшета (раз он Вам подходит) в стили для мобильного
 
  • Нравится
Реакции: Orrs

Orrs

ПРОВЕРЕННЫЙ

Orrs

ПРОВЕРЕННЫЙ
Сообщения
17
Как самый простой вариант. Изменить в стилях адаптивную верстку. Например отключить изменения для мобильного, или задать другие параметры. Например перенести стиль из планшета (раз он Вам подходит) в стили для мобильного
Спасибо!
Да, думаю стиль под планшет был бы оптимальным.
Осталось понять где можно отключить и перенести )
В таблице стилей? Или где-то в настройках платформы есть?.. (хотя там вроде все просмотрел)

пс: загуглил, изучаю )
 

Wildcdu

ЭКСПЕРТ

Wildcdu

ЭКСПЕРТ
Сообщения
1,120
Спасибо!
Да, думаю стиль под планшет был бы оптимальным.
Осталось понять где можно отключить и перенести )
В таблице стилей? Или где-то в настройках платформы есть?.. (хотя там вроде все просмотрел)

пс: загуглил, изучаю )
Тут Вам сложнее подсказать по нескольким причинам, во первых как сделано в Вашей теме реализация я не знаю, во вторых само по себе это может быть по разному, например в одном варианте обнаруживание средствами WP ширины экрана и подгрузкой нужного стиля, вариант 2 механизм адаптивности в теме... скрипт и прочие прелести ))) какой Ваш вариант я не знаю )
 

Wildcdu

ЭКСПЕРТ

Wildcdu

ЭКСПЕРТ
Сообщения
1,120
Что-то гугл не помог
Не могли бы Вы подсказать хоть приблизительно где копать?...
Искать в таблице стилей?
В стилях например по словам
max-width
@media

Или такой грубый вариант в head впишем это
<meta name="viewport" content="width=device-width, initial-scale=1.0">
В стили это
Код:
@media screen and (max-width:960px) {
img {max-width: 100%; height: auto;} /*адаптация изображений*/
#container {width: 100%; height: auto;} /*адаптация контейнера*/
}
960 это Ваше значение желаемое для ширины сайта обычного а потом сайт становится адаптивным.
 

Wildcdu

ЭКСПЕРТ

Wildcdu

ЭКСПЕРТ
Сообщения
1,120
Забыл дописать handheld и просто media по этим словам смотреть стили ))) в дополнение к предыдущим
 

Wildcdu

ЭКСПЕРТ

Wildcdu

ЭКСПЕРТ
Сообщения
1,120
  • Нравится
Реакции: Orrs

Orrs

ПРОВЕРЕННЫЙ

Orrs

ПРОВЕРЕННЫЙ
Сообщения
17
Попробовав пару указанных плагинов выяснил, что дело в плагине Page Builder от SiteOrigin
Он (или сам WP) по умолчанию считает, что на телефоне одна колонка должна занимать всю ширину экрана телефона. В редакторе по поиску media нашел заданные условия. Экспериментирую с другими параметрами. Правда уже один раз пришлось переустановить плагин :) Спасибо за подсказку!
 

vendetter

ПРОВЕРЕННЫЙ

vendetter

ПРОВЕРЕННЫЙ
Сообщения
40
Вставлю свои пять копеек - столкнулся ранее с похожей бедой, как решение выбрал использование
AMP — Accelerated Mobile Pages, плагинов для этой темы много. Фактически всё решается созданием лёгкой шустрой версии сайта для мобилок, учитывая что никто не хочет ждать по пол часа пока грузится сайт - использование отличное решение.
 

spank

ПРОВЕРЕННЫЙ

spank

ПРОВЕРЕННЫЙ
Сообщения
3
а есть плагин для создания приложения для телефона под сайт?
 
Сверху