Как исправить смещение карточки товара

[timaksm21]

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

 

 

[n3bo]

Сделать одинаковую высоту о названий (обрезать, ограничить и т.д.)

[SiteMix]

Либо резать название до определённого количества строк, либо увеличить высоту блока.

Можно уменьшить шрифт в названии на маленьких экранах. Смысл в том, чтобы выровнять высоту.

 

Кстати, на мобильных экранах вряд ли нужны две колонки.Будет одна колонка - проблема отпадёт.

[likesmartass]

2018 год, верстка флоутами все никак не умрет

[jaffagold]

Цитата

2018 год, верстка флоутами все никак не умрет

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

Хотите приключений, сверстайте для своего магазина на флексах шаблон. Поделитесь потом впечатлениями.

 

Цитата

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

Такое может проявиться и на десктопе. Причину вам озвучили.

самое простое решение, подобрать высоту блока .caption и прописать в таблицу стилей, но надо еще медиа-запросы использовать, т.к на разных экранах разная высота получается. 

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

Змінено 24 вересня 2018 користувачем jaffagold

[timaksm21]

Можете пожалуйста подсказать, как правильно прописать код. С высотой сам поиграюсь, а вот как правильно код прописать..( не знаю 

[Pavel666]

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

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

Хотите приключений, сверстайте для своего магазина на флексах шаблон. Поделитесь потом впечатлениями.

 

Такое может проявиться и на десктопе. Причину вам озвучили.

самое простое решение, подобрать высоту блока .caption и прописать в таблицу стилей, но надо еще медиа-запросы использовать, т.к на разных экранах разная высота получается. 

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

 

Мансонри Masonry

[Tom]

Ссылка на проблему, увеличивает скорость решения проблем как минимум вдвое.

Картинки и просьба помочь, ведут к большому количеству букофф от тех, кто пытается помочь , но пишет как минимум на "китайском" для тех кто спрашивает.

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

В вашем случае нужно дописать стили для определённой ширины экрана, которые как мне кажется должны убрать болд, размер шрифта уменьшить  и добавить min-height для блока с описанием. Ну и как вариант сделать расстояние между блоками товара меньше, что позволит и картинке и ценам и описанию выглядеть намного лучше.

На примере шаблона Supra

http://supra-flowers.opencart-template.site/desktops/

 

[timaksm21]

Есть проблема, вот ссылка https://footballshoprta.ru/kluby/spain/barselona/   Теперь буду знать))

 

[Tom]

Один из вариантов. Откройте файл

catalog/view/theme/default/stylesheet/stylesheet.css

и в самый конец добавьте
 

@media (max-width: 768px) {
.product-thumb h4 {
	font-size:1.0em;
	font-weight:500;
	min-height:40px;
   }
   .product-layout {
    padding-right: 4px;
    padding-left: 4px;
    margin-bottom: -10px;
 }
}

 

[likesmartass]

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

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

Хотите приключений, сверстайте для своего магазина на флексах шаблон. Поделитесь потом впечатлениями.

 

 

а кто мешает открыть bootstrap css и заменить 2-3 строчки (ну или каскадом написать)? чтобы .row стал на флексе? и просто карточке товара указать height 100% после этого.

[timaksm21]

В 25.09.2018 в 12:59, Tom сказал:

Один из вариантов. Откройте файл

catalog/view/theme/default/stylesheet/stylesheet.css

и в самый конец добавьте
 

@media (max-width: 768px) {
.product-thumb h4 {
	font-size:1.0em;
	font-weight:500;
	min-height:40px;
   }
   .product-layout {
    padding-right: 4px;
    padding-left: 4px;
    margin-bottom: -10px;
 }
}

 

Спасибо большое, помогло. Только изменил min-height:40px на 60px ))) 

[timaksm21]

Всем большое спасибо за ответы 

[timaksm21]

В 25.09.2018 в 12:59, Tom сказал:

Один из вариантов. Откройте файл

catalog/view/theme/default/stylesheet/stylesheet.css

и в самый конец добавьте
 

@media (max-width: 768px) {
.product-thumb h4 {
	font-size:1.0em;
	font-weight:500;
	min-height:40px;
   }
   .product-layout {
    padding-right: 4px;
    padding-left: 4px;
    margin-bottom: -10px;
 }
}

 

Можно пожалуйста еще одну помощь от вас получить  Как сделать такой же вид, как в категориях (первый скрин) 

Но только уже на главной странице. 

Примерно понимаю, что нужно найти в stylesheet.css строку, которая отвечает за блоки на главной странице и прописать тоже самое... Но в сомневаюсь, что нужно сделать именно так  И как-то страшновато 

[Tom]

Страшно, это даже не пытаться попробовать....

[timaksm21]

19 минут назад, Tom сказал:

Страшно, это даже не пытаться попробовать....

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

Вставил код, который вы скинули, в строчку 558  

 

[timaksm21]

22 часа назад, Tom сказал:

Страшно, это даже не пытаться попробовать....

Не получается блин.. Измеяется только на компе, а на телефоне, как было так и остается 

[Tom]

http://joxi.ru/82Q4MJOij6EVEm

[timaksm21]

В 26.09.2018 в 11:41, Tom сказал:

http://joxi.ru/82Q4MJOij6EVEm

Так и не получилось сделать на главной :((( 

[timaksm21]

В 26.09.2018 в 11:41, Tom сказал:

http://joxi.ru/82Q4MJOij6EVEm

Подскажите пожалуйста, куда все таки нужно вставить код ?