scary.png Happy Halloween! Лови жутко страшный список шаблонов и модулей со скидками.
Jump to content

Recommended Posts

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

Share this post


Link to post
Share on other sites
Все) разобрался, обычными медиа запросами, спасибо.

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


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

Share this post


Link to post
Share on other sites

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

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

/* margin-left: 189px; */

}

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

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

Share this post


Link to post
Share on other sites

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

 

Share this post


Link to post
Share on other sites
Вот это ломает:

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

/* margin-left: 189px; */

}

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

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

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

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

5927dc9cbb5d4_2017-05-2610_40_38.thumb.png.773e1f4692a83fb3a2ee71b6cf240ccf.png

bd50632857e940d602140d60c36199f4.jpg

Share this post


Link to post
Share on other sites
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;">

Edited by jaffagold

Share this post


Link to post
Share on other sites
в настоящее время не наблюдаю на вашем сайте этот глюк. Значит, его уже нет.

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


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

Share this post


Link to post
Share on other sites

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

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

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

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

 

Share this post


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

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


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

Share this post


Link to post
Share on other sites
1 час назад, DjAcidrive сказал:

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

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

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

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

 

 

Edited by jaffagold

Share this post


Link to post
Share on other sites

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

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

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

 

Например:

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;

}

 

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

Edited by jaffagold

Share this post


Link to post
Share on other sites
У вас нет стандарта заполнения Атрибутов
Они у вас вбиты в Описания ( насколько я понял при беглом просмотре, не исключено, что парсингом)
Причем нет однообразного стиля, который можно было бы изменить парой-тройкой исправлений.
 
Например:
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;">
                Цвет

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
You are posting as a guest. If you have an account, please sign in.
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.

×

Important Information

On our site, cookies are used and personal data is processed to improve the user interface. To find out what and what personal data we are processing, please go to the link. If you click "I agree," it means that you understand and accept all the conditions specified in this Privacy Notice.