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

[marionetto]

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

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

/* 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!

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

 

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

 

 

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

Вот так

 

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

  

 

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

 

 

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

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

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

[Blade]

зачем  col-xs-12  делать в 49% ?

поставьте другой класс

или ссылку дайте, правда по ссылке туплю вечно)

[marionetto]

Вот ссылка 

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

http://baymart.ru/nasos-all/nasos-verh/

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

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

[Blade]

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

Вот ссылка 

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

http://baymart.ru/nasos-all/nasos-verh/

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

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

затупил я))

 

@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 надо проверить дополнительно

 

 

 

[Blade]

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

 

.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;

}

[marionetto]

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

[Blade]

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

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

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

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

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

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

 

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

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

 

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

 

[marionetto]

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

[Blade]

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; */

}

[marionetto]

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

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

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

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

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

 

 

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

вот ссылка

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

http://baymart.ru/nasos-all/nasos-cirk/

 

 

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

[jaffagold]

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

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)

[Blade]

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

  Показать содержимое

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)

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

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

st-sklad.ru

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

[jaffagold]

Я не знаю ничего о вашем сайте. Я говорю о системе, методике.

Есть предопределенные классы сетки Bootstrap. У них есть свои стили в css.

Переопределять их неправильно.

Потому, что эти классы прописаны повсеместно во многих tpl-ках. И неизвестно, где эта перемена стилей проявится в ненужном месте.

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

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

А теперь о вашем сайте.

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

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

.col-xs-12 {

width: 50%;

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

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

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

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

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

[Blade]

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

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

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

.col-xs-12 {

width: 50%;

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

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

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

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

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

 

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

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

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

 

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

 

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

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

 

[butuz.kz]

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

 

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

 

Изменено октября 12, 2017 пользователем WarStyle
Код и картинки прячем под спойлер!

[WarStyle]

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

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

 

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

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

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

[butuz.kz]

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

[WarStyle]

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

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

 

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

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

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

 

[jaffagold]

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 был прав. Рано вам еще...

 

[butuz.kz]

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

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

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

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

.corner_0 {

position: absolute;

}

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

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

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

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

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

.product-thumb .product-name a {

color: #666;

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

}

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

 

[jaffagold]

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

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

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

[butuz.kz]

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

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

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

[butuz.kz]

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

 

[jaffagold]

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

 

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

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

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

 

их нет.

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

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

http://htmlbook.ru/samcss

[butuz.kz]

ладно и на том спасибо! мне блин сайт надо запилить.