marionetto

Мобильная версия в 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 к товару, если текст будет одинаковой длинны ко всем товарам тогда все ряды будут по два товара.

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


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

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 наименований, сделаю его отображение на мобильном) шутка конечно, не до фильтра

 

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

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

 

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


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

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

 

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

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

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


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

Создайте аккаунт или войдите для комментирования

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

Создать аккаунт

Зарегистрируйтесь для получения аккаунта. Это просто!

Зарегистрировать аккаунт

Войти

Уже зарегистрированы? Войдите здесь.

Войти сейчас

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

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