• Вопрос без рабочей ссылки на проблему считается риторическим. Без ссылки и скриншота - провокацией!
  • Темы озаглавленные с маленькой буквы или капсом удаляются без предупреждения!

Адаптация сайта для мобильных устройств

Zaknafain

Опытный
Местный
#3
Качественные темы все уже адаптированы под мобильные девайсы. Никаких плагинов не надо.
тема wootique, сервис есть, где на яблоках можно посмотреть как сайт выглядит, так вот как то не очень она смотрелась... хотя думаю надо на реальном телефоне глянуть:)
 

rikitiki

Специалист
Местный
#4
А вы просто не пытались окно браузера по ширине минимально уменьшить? Так примерно сайт будет и на мобильниках выглядеть, только в худшую сторону. :)
 
#5
а если не адаптирован шаблон ? не подскажите чего делать а то я все налепил уже((находил туториалы и чет вообще разобраться не могу
 
#6
а лучше, как зафиксировать шаблон для всех экранов?
а то он даже при уменьшении окна браузера скачет((
подкиньте какой-нить туториал для чайника
 
Последнее редактирование:

amoresperros

Moderator
Команда форума
Местный
#8
а лучше, как зафиксировать шаблон для всех экранов?
а то он даже при уменьшении окна браузера скачет((
подкиньте какой-нить туториал для чайника
Вам необходимо изучить азы верстки для начала, гугл htmlbook там и css есть, создание адаптивное верстки тоже.
 

amoresperros

Moderator
Команда форума
Местный
#9
а если не адаптирован шаблон ? не подскажите чего делать а то я все налепил уже((находил туториалы и чет вообще разобраться не могу
Если руки крюки, и нет желания лезть в дебри и изучать кучу всего на один раз, то лучше всего купить премиум тему. Вы сэкономите время, и нервы.
 

ShoNN

Форумчанин
#10
Добрый вечер, подскажите пожалуйста как решить проблему. Стоит адаптивная тема под мобильные устройства Storefont и совместимая с woocommerce http://clockka.ru/. сайт отображается отлично на android, а вот на apple скачет карточка товара. Карточку подгонял с помощью этой темы, http://wpcommerce.ru/threads/vyvod-knopki-ili-ceny-na-odnom-urovne.2318/. Скажите как адаптировать под apple, делать отдельный вариант карточки для каждого разрешения экрана через @media screen или есть способ проще? Так же пробовал менять значения px на % особых изменений не дало.
 

ShoNN

Форумчанин
#12
Можно еще несколько вопросов?)
Почему сайт на телефонах android сразу отображался адаптивно, а вот apple требует дополнительных махинаций с кодом, в чем разница?
zUC117GaD9g.jpg apple.png

Еще о дин, когда редактирую карточку товара под 600х800 какое бы значение в процентах я не выставлял, на странице отображается один товар на строке. Не подскажите как сделать несколько?

И последний, изменения в родительской теме рекомендуют производить созданием дочерней, прописанные мной строки касаемо медиа-запросов работают только в родительском style.css. Возможно я допустил ошибку в
@import url.
/*
Theme Name: storefont-Child
Theme URI: http://clockka.ru/
Description: Дочерняя тема для темы storefont
Author: ShoNN
Author URI: http: //clockka.ru/about/
Template: storefont
Version: 0.1.0
*/
@import url("public_html/wp-content/themes/storefront");
 

Вложения

searchingman

Гуру
Местный
#13
И последний, изменения в родительской теме рекомендуют производить созданием дочерней, прописанные мной строки касаемо медиа-запросов работают только в родительском style.css. Возможно я допустил ошибку в
@import url.
/*
Theme Name: storefont-Child
Theme URI: http://clockka.ru/
Description: Дочерняя тема для темы storefont
Author: ShoNN
Author URI: http: //clockka.ru/about/
Template: storefont
Version: 0.1.0
*/
@import url("public_html/wp-content/themes/storefront");
Возьмите любую дочернюю тему для StoreFront, н-р, Boutique и посмотрите как подключаются стили.
 

ShoNN

Форумчанин
#16
А где эта волшебная кнопочка находится? У меня Storefront и гугля ругается, просит тему адаптировать...
админ панель -> внешний вид -> темы -> выбираете нужную вам и жмете активировать.
можно скрин или ссылку Storefront сама по себе адаптивная тема, у нее в style.css все в относительных единицах измерения "em". И с мобильными устройствами она дружит. В ней просто ползет сетка товаров, потому что Cart Tab выстраивается относительно изображения, проще их подогнать под один формат.
 
#17
админ панель -> внешний вид -> темы -> выбираете нужную вам и жмете активировать.
можно скрин или ссылку Storefront сама по себе адаптивная тема, у нее в style.css все в относительных единицах измерения "em". И с мобильными устройствами она дружит. В ней просто ползет сетка товаров, потому что Cart Tab выстраивается относительно изображения, проще их подогнать под один формат.
Я тоже надеялась на то, что тема адаптирована под мобильные устройства... Но в телефонах, к сожалению, не очень всё комильфо... У меня каталог товаров в произвольном меню и в шапке стоит логотип магазина. На мобильниках логотип занимает кучу пространства, а список категорий товаров располагается в самом низу... Надо прописывать мобильную версию дополнительно, но сама с этим не справлюсь... Ищу плагин, которым можно её создать. И соответственно, в связи с этим вопросы возникли: насколько такой плагин увеличит вес сайта и не будет ли конфликта плагина с темой? Ведь в теме уже прописана функция мобильной версии, значит её нужно отключить, а в каком файле и как? Сайт: http://novostea.ru/
 

ShoNN

Форумчанин
#18
Я тоже надеялась на то, что тема адаптирована под мобильные устройства... Но в телефонах, к сожалению, не очень всё комильфо... У меня каталог товаров в произвольном меню и в шапке стоит логотип магазина. На мобильниках логотип занимает кучу пространства, а список категорий товаров располагается в самом низу... Надо прописывать мобильную версию дополнительно, но сама с этим не справлюсь... Ищу плагин, которым можно её создать. И соответственно, в связи с этим вопросы возникли: насколько такой плагин увеличит вес сайта и не будет ли конфликта плагина с темой? Ведь в теме уже прописана функция мобильной версии, значит её нужно отключить, а в каком файле и как? Сайт: http://novostea.ru/
Мобильная версия сайта прописана в файле style.css и ее описание скорей всего начинается со строчки @media screen and (max-width: 568px) {. Как внести изменения в нее смотрите здесь.
Плагины для адаптации есть, о самых популярных можно почитать здесь . Мобильную версию моего сайта генерирует плагин Jetpack советую вам его попробовать.
 
#19
Мобильная версия сайта прописана в файле style.css и ее описание скорей всего начинается со строчки @media screen and (max-width: 568px) {. Как внести изменения в нее смотрите здесь.
Плагины для адаптации есть, о самых популярных можно почитать здесь . Мобильную версию моего сайта генерирует плагин Jetpack советую вам его попробовать.
Огромное спасибо за оперативный ответ и реальную помощь!!! Для меня вариантов нет, придётся использовать плагин ((((
 
Сверху Снизу