Перейти к содержанию

Рекомендуемые сообщения

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

 

 

Screenshot.png

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


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

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

  • +1 1

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


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

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

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

 

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

  • +1 1

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


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

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

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

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

 

Цитата

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

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

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

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

Изменено пользователем jaffagold
  • +1 1

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


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

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

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


Ссылка на сообщение
Поделиться на другие сайты
1 час назад, jaffagold сказал:

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

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

 

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

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

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

 

Мансонри Masonry

  • +1 1

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


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

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

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

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

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

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

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

 

  • +1 1

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


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

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

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

 

  • +1 1

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


Ссылка на сообщение
Поделиться на другие сайты
12 часов назад, jaffagold сказал:

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

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

 

 

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

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


Ссылка на сообщение
Поделиться на другие сайты
В 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 ))) 

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


Ссылка на сообщение
Поделиться на другие сайты
В 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;
 }
}

 

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

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

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

20180925_092120000_iOS.png

20180925_092107000_iOS.png

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


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

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

  • +1 1

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


Ссылка на сообщение
Поделиться на другие сайты
19 минут назад, Tom сказал:

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

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

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

 

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


Ссылка на сообщение
Поделиться на другие сайты
22 часа назад, Tom сказал:

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

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

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


Ссылка на сообщение
Поделиться на другие сайты
<script type="text/javascript">
window.onload = function() {
	var a=['caption'];
	for (var i=0; i<a.length; i++) {
		setTimeout((function(Name) {
			return function () {correctionHeight(Name);};
		})(a[i]), 30);
	};
};
function correctionHeight(Name) {
	var mainDivs = document.getElementsByClassName(Name);
	var maxHeight = 0;
	for (var i = 0; i < mainDivs.length; ++i) {
		if (maxHeight < mainDivs[i].clientHeight) {
			maxHeight = mainDivs[i].clientHeight; 
		}
	}
	for (var i = 0; i < mainDivs.length; ++i) {
		mainDivs[i].style.height = maxHeight + "px";
	}
};
</script>

посмотреть можно тут в частности в блоке "преимущества"

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


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

Для публикации сообщений создайте учётную запись или авторизуйтесь

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

Создать учетную запись

Зарегистрируйте новую учётную запись в нашем сообществе. Это очень просто!

Регистрация нового пользователя

Войти

Уже есть аккаунт? Войти в систему.

Войти

  • Последние посетители   0 пользователей онлайн

    Ни одного зарегистрированного пользователя не просматривает данную страницу

×

Важная информация

На нашем сайте используются файлы cookie и происходит обработка некоторых персональных данных пользователей, чтобы улучшить пользовательский интерфейс. Чтобы узнать для чего и какие персональные данные мы обрабатываем перейдите по ссылке. Если Вы нажмете «Я даю согласие», это означает, что Вы понимаете и принимаете все условия, указанные в этом Уведомлении о Конфиденциальности.