Проблемы с адаптивным дизайном.

maxim nestoff

Создатель
Регистрация
23 Апр 2009
Сообщения
185
Реакции
15
Друзья, есть сайт Для просмотра ссылки Войди или Зарегистрируйся, у него есть раздел магазина, например один из разделов Для просмотра ссылки Войди или Зарегистрируйся. При мобильном виде товары в колонках не переносятся, а сжимаются как гармошка (прикрепил скриншоты. На первом как должно быть, на 2,3- как есть). Подскажите как можно починить верстку при мобильном виде? Шаблон адаптивный, но конкретно под компонент joomla shoping не адаптирован. А за работу по исправлению мне загнули 2000 рублей. Был бы вам очень благодарен за помощь. С меня деньги на конфеты :)
 

Вложения

  • image.jpg
    image.jpg
    38,1 KB · Просмотры: 27
  • image.jpg
    image.jpg
    68,1 KB · Просмотры: 26
  • image.jpg
    image.jpg
    73,7 KB · Просмотры: 23
У тебя блок двери располагается в блоке .jswidth25, а у него width: 23%. Так что ничего чинить не нужно - поведение by design.
 
У тебя блок двери располагается в блоке .jswidth25, а у него width: 23%. Так что ничего чинить не нужно - поведение by design.
Как сделать чтоб было 2 колонки с товарами в мобильном виде?
 
Как сделать чтоб было 2 колонки с товарами в мобильном виде?
Попробуй так:
HTML:
.jswidth25 {
    max-width: 40%;
    min-width: 23%;
}
Но нужно посмотреть где еще этот стиль используется и потом глянуть как себя ведут элементы с этим стилем на других страницах. Если что-то не устроит - добавить к элементу блока двери уникальный стиль и ему прописать эти свойства.
UPD: чтобы убрать полосу справа попробуй увеличить max-width до 48-50%
 
Последнее редактирование:
Попробуй так:
HTML:
.jswidth25 {
    max-width: 40%;
    min-width: 23%;
}
Но нужно посмотреть где еще этот стиль используется и потом глянуть как себя ведут элементы с этим стилем на других страницах. Если что-то не устроит - добавить к элементу блока двери уникальный стиль и ему прописать эти свойства.
Скажите, а как товары выровнять чтоб не было свободного поля справа:
Для просмотра ссылки Войди или Зарегистрируйся

Если поставить
min-width: 50%;

то будет правильно отображаться мобильная версия

8785c6756044888d99030f4e53fbeafee8c60b6d.png

А десктопная будет отображаться с двумя товарами на строку[/spoil]
[spoil]
90213b3ca757ccd8e636b12fb99755334f457e69.png
 
Последнее редактирование модератором:
Назад
Сверху