Вопрос по адаптивке

[Mrpoopybutthole]

Здравствуйте, уважаемые форумчане. Ситуация следующая, есть интернет магазин на opencart 1.5.6, его нужно сделать адаптивным. С данным движком знаком слабо, поэтому прошу помощи, гугл не дал точной информации, объясните пожалуйста концепцию создания адаптива, как вообще это происходит. Спасибо.

[Mrpoopybutthole]

Все) разобрался, обычными медиа запросами, спасибо.

[DjAcidrive]

Все) разобрался, обычными медиа запросами, спасибо.

Привет подскажи как ты сделал это?
У меня стоит адаптивный шаблон, но в товаре сделано 3 вкладки (описание, отзывы и комментарии вк) и всё это съезжает при открывании сайта с телефона.


Отправлено с моего iPhone используя Tapatalk

[jaffagold]

Вот это ломает:

#column-left + #column-right + #content, #column-left + #content {

/* margin-left: 189px; */

}

НО у вас есть еще одно небольшое поле справа на всех страницах и, как следствие, горизонтальная полоса прокрутки.

В инспекторе кода поочередно удаляйте элементы и проверяйте. Когда исчезнет полоса прокрутки, тогда надо внимательно просмотреть стили элемента и вложенных элементов.

[DjAcidrive]

jaffagold, спасибо за оперативный ответ. Я так понимаю смотреть stylesheet.css нужно?

 

[DjAcidrive]

Вот это ломает:

#column-left + #column-right + #content, #column-left + #content {

/* margin-left: 189px; */

}

НО у вас есть еще одно небольшое поле справа на всех страницах и, как следствие, горизонтальная полоса прокрутки.

В инспекторе кода поочередно удаляйте элементы и проверяйте. Когда исчезнет полоса прокрутки, тогда надо внимательно просмотреть стили элемента и вложенных элементов.

 Убрал из CSS эти строки, стало лучше, но проблема номер два, это что описание "срезается" что в обычной версии, что в мобильной.

И не совсем понял про "небольшое поле справа на всех страницах и, как следствие, горизонтальная полоса прокрутки." Где его найти? 

[jaffagold]

2 часа назад, DjAcidrive сказал:

Где его найти? 

в настоящее время не наблюдаю на вашем сайте этот глюк. Значит, его уже нет.

Есть другой в карточке товара

Таблицы характеристик шире окна контента. и полоса прокручивания появляется там. Адаптивность не нарушается, но не слишком красиво

Все из-за nowrap="nowrap" в разметке таблицы характеристик.

<tr style="margin: 0px; padding: 0px;">
            <td nowrap="nowrap" style="border-bottom-color: rgb(255, 255, 255); border-bottom-style: solid; margin: 0px; padding: 5px 5px 5px 7px;">

Змінено 26 травня 2017 користувачем jaffagold

[DjAcidrive]

в настоящее время не наблюдаю на вашем сайте этот глюк. Значит, его уже нет.

Если зайти в товар с мобильной версии, и нажать на Отзывы то оно разъезжается. Как пофиксить это не знаете?
И ещё вместо "Вконтакте" отображаются вопросительные знаки.


Отправлено с моего iPhone используя Tapatalk

[jaffagold]

Я вам уже написал как искать глючный блок

и указал какой именно глюк на одной из страниц.

Там где вы указали глюк не такой, но аналогичный.

Разбирайтесь с Таблицей характеристик. Именно она раздвигает страницу вширь.

 

[DjAcidrive]

Я вам уже написал как искать глючный блок
и указал какой именно глюк на одной из страниц.
Там где вы указали глюк не такой, но аналогичный.
Разбирайтесь с Таблицей характеристик. Именно она раздвигает страницу вширь.
 

Спасибо вам за помощь)
К сожалению данный код nowrap="nowrap"... не удалось найти.
Не могу понять где копать блок с Отзывами" он очень сильно уезжает


Отправлено с моего iPhone используя Tapatalk

[jaffagold]

1 час назад, DjAcidrive сказал:

К сожалению данный код nowrap="nowrap"... не удалось найти.

Для начала, смотрите в Инспекторе кода. Там где табличное представление описания- левая часть( название) с таким стилем.

Это не дает делать перенос на следующую строку и при сужении экрана сама таблица оказывается шире экрана, как бы распирает его вширь.

Не могу найти товар, где это наблюдал ((

 

 

Змінено 26 травня 2017 користувачем jaffagold

[jaffagold]

У вас нет стандарта заполнения Атрибутов

Они у вас вбиты в Описания ( насколько я понял при беглом просмотре, не исключено, что парсингом)

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

 

Например:

http://i-ride.ru/index.php?route=product/product&path=61_66&product_id=129

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

смотрим в инспекторе кода на таблицу в Описании (Вес, тип ванны ....) и видим:

<table style="width: 476px; color: rgb(50, 50, 50); font-family: Tahoma; ">

 

далее

http://i-ride.ru/index.php?route=product/product&path=61&product_id=180

тоже, там где Описание

Цвет, Возможные размеры...

<td nowrap="nowrap" style="border-bottom-color: rgb(255, 255, 255); border-bottom-style: solid; margin: 0px; padding: 5px 5px 5px 7px;">
                <b style="margin: 0px; padding: 0px;">Цвет</b></td>

 

Если это действительно так, то все очень плохо. Надо индивидуально смотреть все товары, у которых появляется горизонтальная полоса прокрутки на мобильных 

 

Отзывы на странице

http://i-ride.ru/index.php?route=product/product&path=112_113&product_id=551

Там, где кнопки редактора Отзывов

.wysibb {

border: 1px solid #ddd;

position: relative;

/* width: 730px; - при беглом просмотре- удаление стиля решает проблему с отзывами */

background: #fff;

font-size: 12px;

}

 

Вообще, фиксированная ширина в адаптивной верстке- очень опасная штука.

Змінено 26 травня 2017 користувачем jaffagold

[DjAcidrive]

У вас нет стандарта заполнения Атрибутов
Они у вас вбиты в Описания ( насколько я понял при беглом просмотре, не исключено, что парсингом)
Причем нет однообразного стиля, который можно было бы изменить парой-тройкой исправлений.
 
Например:
http://i-ride.ru/index.php?route=product/product&path=61_66&product_id=129
на мобильных наблюдаем полосу горизонтально прокрутки при ширине экрана
смотрим в инспекторе кода на таблицу в Описании (Вес, тип ванны ....) и видим:

 
далее
http://i-ride.ru/index.php?route=product/product&path=61&product_id=180
тоже, там где Описание
Цвет, Возможные размеры...

 
Если это действительно так, то все очень плохо. Надо индивидуально смотреть все товары, у которых появляется горизонтальная полоса прокрутки на мобильных 
 
Отзывы на странице
http://i-ride.ru/index.php?route=product/product&path=112_113&product_id=551
Там, где кнопки редактора Отзывов
.wysibb {
border: 1px solid #ddd;
position: relative;
/* width: 730px; - при беглом просмотре- удаление стиля решает проблему с отзывами */
background: #fff;
font-size: 12px;
}
 
Вообще, фиксированная ширина в адаптивной верстке- очень опасная штука.

Огромное Вам спасибо за помощь! Разобрался с текстовым редактором wysibb. Отзывы теперь нормально отображаются в мобильной версии.
По поводу полос прокрутки это из за того что описание копировалось с других источников, поправлю позже это.


Отправлено с моего iPhone используя Tapatalk

style="border-bottom-color: rgb(255, 255, 255); border-bottom-style: solid; margin: 0px; padding: 5px 5px 5px 7px;">                 Цвет