Перейти к содержанию

Рекомендуемые сообщения

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
Все) разобрался, обычными медиа запросами, спасибо.

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


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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

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

/* margin-left: 189px; */

}

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

 

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
Вот это ломает:

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

/* margin-left: 189px; */

}

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

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

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

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

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

bd50632857e940d602140d60c36199f4.jpg

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
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;">

Изменено пользователем jaffagold

Поделиться сообщением


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

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


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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

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

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

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

 

Поделиться сообщением


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

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


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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
1 час назад, DjAcidrive сказал:

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

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

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

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

 

 

Изменено пользователем 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;

}

 

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

Изменено пользователем jaffagold

Поделиться сообщением


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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Для публикации сообщений создайте учётную запись или авторизуйтесь

Вы должны быть пользователем, чтобы оставить комментарий

Создать учетную запись

Зарегистрируйте новую учётную запись в нашем сообществе. Это очень просто!

Регистрация нового пользователя

Войти

Уже есть аккаунт? Войти в систему.

Войти

  • Последние посетители   0 пользователей онлайн

    Ни одного зарегистрированного пользователя не просматривает данную страницу

×

Важная информация

На нашем сайте используются файлы cookie и происходит обработка некоторых персональных данных пользователей, чтобы улучшить пользовательский интерфейс. Чтобы узнать для чего и какие персональные данные мы обрабатываем перейдите по ссылке. Если Вы нажмете «Я даю согласие», это означает, что Вы понимаете и принимаете все условия, указанные в этом Уведомлении о Конфиденциальности.