COVID2019 и это вот все. Друзья, вся эта история начинает плохо пахнет. Мойте руки, не ходите в люди. Отложите все плановые покупки и положите в носок заначку. Заприте ваших родителей, бабушек-дедушек на даче. Лучше перебдеть чем недобдеть. Берегите себя!

Мобильная версия в 2 столбца


Recommended Posts

Ребят подскажите. Решил сделать мобильную версию в два столбца. Добавил стили

Скрытый текст

/* products in the modules and categories 2 in a row */
@media (max-width: 768px) {
.col-xs-12 {
width: 49%;
vertical-align: top;
text-align: center;
float: left;
min-height: 450px;
}
}

 

Товары отображаются как нужно. но модуль Cool Banner!

До вставки новых стилей выглядел вот так

 

Скрытый текст

image1.PNG

 

 

После добавки стилей

Вот так

 

Скрытый текст

image2.PNG image3.PNG 

 

Скрытый текст

image4.PNG

 

 

Модуль так же разбился на 2 колонки, но появились пробелы большие по 5 см. если смотреть с экрана 3.5 дюйма.

Новое расположение иконок модуля меня устраивает, как убрать пробелы? Подскажите!

Заранее спасибо!

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

Вот ссылка 

Скрытый текст

но работает только с телефона у меня, на экране ПК не показывает как нужно.

Какой класс можно поставить?

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

5 минут назад, marionetto сказал:

Вот ссылка 

  Скрыть содержимое

но работает только с телефона у меня, на экране ПК не показывает как нужно.

Какой класс можно поставить?

затупил я))

 

@media (max-width: 768px)

.col-xs-12 {

width: 50%;

vertical-align: top;

text-align: center;

float: left;

 

по мне вот так выглядит правильно (на компе проверял)

 

криво стоят блоки с товаров, надо ограничить краткое описание по кол-ву символов. 75 например

можно ограничить высоту блока

.product-thumb .caption {

padding: 0 20px;

min-height: 210px;

}

 

с цифрой 210 надо проверить дополнительно

 

 

 

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

Еще я бы сделал так

 

.categorywall .categorywall_thumbnail > a {

font-size: 12px;

font-weight: normal;

position: relative;

}

 

и так

 

.categorywall.covers .caption ul li a {

color: #fff;

font-size: 12px;

line-height: 16px;

}

 

и

h4 {

font-size: 14px;

}

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

5 минут назад, marionetto сказал:

Я прошу прощения, тоже тупанул. coolbanner модуль выводится у меня только в товарах

а я про categorywall вообще пишу )) сплю видать

по ссылке в упор не вижу coolbanner

только категории слева и сам товар

кулбаннер где стоит ?

 

и сделайте что я написал, потому как вот так 

Скрытый текст

9bff106d702b.png

 

Скрытый текст

742447a8bd1f.png

 

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

6 минут назад, marionetto сказал:

Сделал! Круто! Спасибо. По cool banner можете подсказать? Он в карточке товара находится.

не вижу((

мы то что про одно и тоже ?

https://liveopencart.ru/opencart-moduli-shablony/moduli/vneshniy-vid/coolbanner-v_2-x

 

и вы не сделали....уберите min height 450 в том блоке что выше говорили

я понял мы про Custom Banner наверное ??

 

Обязательно!

 

@media (max-width: 768px)

.col-xs-12 {

width: 50%;

vertical-align: top;

text-align: center;

float: left;

/* min-height: 450px; */

}

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

Опечатка, спал уже) да все верно  Custom Banner  о нем идет речь!

min-height: 450px;  убрал.

В карточке товара теперь  Custom Banner отображается как надо! 

Щас убрал еще текст описание и все отлично отображается! 

Спасибо огромное за помощь!!!

 

 

Все равно) в некоторых категориях товары отображаются то по два товара в ряд то по одному товару в ряд

вот ссылка

Скрытый текст

 

 

Я так полагаю это из-за текста H1 к товару, если текст будет одинаковой длинны ко всем товарам тогда все ряды будут по два товара.

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

  • 5 weeks later...
Скрытый текст

col-xs-12 {

width: 50%;

Ребята, кто так делает?

Это не так надо делать.

col-xs-12 должно быть 100% ( 12/12=1)

Этих стилей желательно вообще не касаться, поедет весь сайт.

( читать про сетку Bootstrap из 12 колонок)

Хотите половину

пишите col-xs-6 в нужном файле .tpl (6/12=1/2)

хотите четверть: пишите col-xs-3 (3/12=1/4)

хотите треть: пишите col-xs-4 (4/12=1/3)

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

3 часа назад, jaffagold сказал:
  Показать содержимое

Ребята, кто так делает?

Это не так надо делать.

col-xs-12 должно быть 100% ( 12/12=1)

Этих стилей желательно вообще не касаться, поедет весь сайт.

( читать про сетку Bootstrap из 12 колонок)

Хотите половину

пишите col-xs-6 в нужном файле .tpl (6/12=1/2)

хотите четверть: пишите col-xs-3 (3/12=1/4)

хотите треть: пишите col-xs-4 (4/12=1/3)

Это с чего это вдруг ???

Может подтвердите свои слова на моем сайте ?

st-sklad.ru

и покажете мне где у меня что поехало ?

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

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

Там, где на главной я увидел блоки в 2 колонки на мобильном экране использован класс именно col-xs-6.

У вас, не сделано такого, как вы советуете:

.col-xs-12 {

width: 50%;

ТО есть, у вас на сайте сделано правильно, а совет вы даете ошибочный. Без обид.

Еще по вашему сайту:

1. Вам не кажется, что чем меньше экран, тем нужнее фильтр на сайте? А он у вас только на больших экранах.

(OCFilter прекрасно работает вплоть до самых малых экранов)

2. Если в product/category.tpl  прописать col-xs-6, возможно, будет лучше представление на мобильных в категориях. (дело вкуса)

 

согласен, вижу, НО вполне возможно изменил потом, или не я совсем (по факту не спорю)

делал изначально именно как выше и все было отлично

просто делал ограничение по ширине экрана "до" и ставил 50%

 

по второму - если настроете мне фильтр на 30000 наименований, сделаю его отображение на мобильном) шутка конечно, не до фильтра

 

по третьему - а вот кстати спасибо за замечание, почему то не обращал внимание

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

 

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

  • 8 months later...

тоже проблема с мобильной версией. Что-то сделал не помню какие файлы правил, но сделал такую бяку. Может кто подскажет как вернуть назад все или привести в нормальный вид? на компе тоже товары все пляшут, в стандартной теме товары стоят ровно, но в мобильной версии все так же как на скрине

 

Скрытый текст

Screenshot_20171012-182647.png

 

Изменено пользователем WarStyle
Код и картинки прячем под спойлер!
Ссылка на комментарий
Поделиться на других сайтах

2 часа назад, butuz.kz сказал:

тоже проблема с мобильной версией.

 

1) Поискать бекап на хостинге до того как наделали бяки.

2) Найти человека который исправит тут: ТЫЦ

3) Поставить нормальный шаблон и не мучать дефолтный если не умеете =)

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

1 час назад, butuz.kz сказал:

нету на хостинге бэкапа  того времени

 

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

2) Найти человека который исправит тут: ТЫЦ

3) Поставить нормальный шаблон и не мучать дефолтный если не умеете =)

 

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

8 часов назад, butuz.kz сказал:

Может кто подскажет как вернуть назад все или привести в нормальный вид? на компе тоже товары все пляшут, в стандартной теме товары стоят ровно, но в мобильной версии все так же как на скрине

Тут 2 проблемы

1. Разная высота карточек товара в зависимости от длины названия и описания товара. Это стандартная болячка стандартного шаблона опенкарт.  Самое простое- указать высоту для div.caption ( возможно, придется еще повозиться с медиазапросами)

2. Если речь о двух колонках на самых малых экранах( вид - так себе..). Похоже, что в файле common.js поменяли col-xs-12 на col-xs-6. Попробуйте вернуть оригинальный файл из сборки.

 

И еще. Ссылка на сайт сильно ускоряет и облегчает помощь.

P.S.

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

Смотрите строка выделена жирным (stylesheet.css:1060) это где плохой код.

Вот то, что красным, уберите, или замените на 

width: 100%; ( как и должно быть)

 

 

@media (max-width: 768px)

stylesheet.css:1060

.col-xs-12 {

width: 50%;

vertical-align: top;

text-align: center;

}

Так решите вторую проблему. А потом за первую можно браться

Там у вас еще стикеры криво стоят. Из-за них картинка съезжает вниз и карточка товара удлинняется.

Им надо что-то типа такого

.corner_0 {

position: absolute;

}

Ну и смотреть, куда их позиционировать.

 

А потом надо разбираться с высотой блоков товаров, модулей, статей.

ЧТО у вас со шрифтом творится на странице? 

.product-thumb .product-name a {

color: #666;

font-size: 12px; /*это кто такое придумал????*/

}

 

Таки WarStyle был прав. Рано вам еще...

 

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

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

По поводу стикеров- они в стандартной теме стоят нормально, а в этой ZBaby она называется вот так вот пляшут скажите пожалуйста 

8 часов назад, jaffagold сказал:

Им надо что-то типа такого

.corner_0 {

position: absolute;

}

Ну и смотреть, куда их позиционировать.

 какой файл смотреть надо?

8 часов назад, jaffagold сказал:

А потом надо разбираться с высотой блоков товаров, модулей, статей.

ЧТО у вас со шрифтом творится на странице? 

.product-thumb .product-name a {

color: #666;

font-size: 12px; /*это кто такое придумал????*/

}

что именно тут не так? 

 

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

Стили пишутся в stylesheet.css

"Не так" там размер шрифта 12 ( я же жирным выделил строку).

У вас название товара мельче, чем описание. У описания размер 16.

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

17 часов назад, jaffagold сказал:

. Разная высота карточек товара в зависимости от длины названия и описания товара. Это стандартная болячка стандартного шаблона опенкарт.  Самое простое- указать высоту для div.caption ( возможно, придется еще повозиться с медиазапросами)

не могу найти строк с div.caption в stylesheet.css 

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

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

 

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

2 часа назад, butuz.kz сказал:

 

19 часов назад, jaffagold сказал:

. Разная высота карточек товара в зависимости от длины названия и описания товара. Это стандартная болячка стандартного шаблона опенкарт.  Самое простое- указать высоту для div.caption ( возможно, придется еще повозиться с медиазапросами)

не могу найти строк с div.caption в stylesheet.css 

 

их нет.

Стили надо не править, а дописывать в конце файла.

Вам рановато еще править. Пока изучите матчасть на уровне "для чайников" ( без обид)

http://htmlbook.ru/samcss

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

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Гость
Ответить в тему...

×   Вы вставили отформатированное содержимое.   Удалить форматирование

  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.

  • Сейчас на странице   0 пользователей

    • Нет пользователей, просматривающих эту страницу