Перейти к содержимому


Новинки/товары На Главной И Хиты Сделать Двигающимися


  • Авторизуйтесь для ответа в теме
Сообщений в теме: 46

#41 metry

metry

    Активный участник

  • Модераторы
  • 871 сообщений

Отправлено 21 Август 2017 - 11:31

Добрый день. В начале ветки есть инструкция по внесения изменений.

#42 Ribka

Ribka

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 226 сообщений

Отправлено 21 Август 2017 - 13:48

Просмотр сообщенияmetry (21 Август 2017 - 11:31) писал:

Добрый день. В начале ветки есть инструкция по внесения изменений.

Все получилось :)
Только есть один нюанс. А можно сделать так, чтобы карточка товара была однинакогого размера для всех?
Сейчас они разные. Я так понимаю, за что разного формата изображения https://prnt.sc/gb4rnx

#43 Firefly

Firefly

    Активный участник

  • Модераторы
  • 3 810 сообщений

Отправлено 21 Август 2017 - 14:19

Просмотр сообщенияRibka (21 Август 2017 - 13:48) писал:

Все получилось :)
Только есть один нюанс. А можно сделать так, чтобы карточка товара была однинакогого размера для всех?
Сейчас они разные. Я так понимаю, за что разного формата изображения https://prnt.sc/gb4rnx

В шаблоне main.css код:
.products-grid .item .product-image {position: relative;margin-bottom: 15px;overflow: hidden;}
.products-grid .item .product-image a.product-img {display: block;line-height: {SETTINGS_GOODS_IMAGES_SIZE_SMALL | divide("2")}px;}

Заменил на:
.products-grid .item .product-image {position: relative;margin-bottom: 15px;overflow: hidden;height: 268px;display: table;}
.products-grid .item .product-image a.product-img {display: table-cell;vertical-align: middle;line-height: {SETTINGS_GOODS_IMAGES_SIZE_SMALL | divide("2")}px;}


#44 Ribka

Ribka

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 226 сообщений

Отправлено 21 Август 2017 - 15:38

Просмотр сообщенияFirefly (21 Август 2017 - 14:19) писал:

В шаблоне main.css код:
.products-grid .item .product-image {position: relative;margin-bottom: 15px;overflow: hidden;}
.products-grid .item .product-image a.product-img {display: block;line-height: {SETTINGS_GOODS_IMAGES_SIZE_SMALL | divide("2")}px;}

Заменил на:
.products-grid .item .product-image {position: relative;margin-bottom: 15px;overflow: hidden;height: 268px;display: table;}
.products-grid .item .product-image a.product-img {display: table-cell;vertical-align: middle;line-height: {SETTINGS_GOODS_IMAGES_SIZE_SMALL | divide("2")}px;}

Все супер :rolleyes: ребята, вы такие молодцы. Спасибо большое. Сайт на глазах преображается)

#45 Ribka

Ribka

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 226 сообщений

Отправлено 22 Август 2017 - 21:57

Просмотр сообщенияFirefly (21 Август 2017 - 14:19) писал:

В шаблоне main.css код:
.products-grid .item .product-image {position: relative;margin-bottom: 15px;overflow: hidden;}
.products-grid .item .product-image a.product-img {display: block;line-height: {SETTINGS_GOODS_IMAGES_SIZE_SMALL | divide("2")}px;}

Заменил на:
.products-grid .item .product-image {position: relative;margin-bottom: 15px;overflow: hidden;height: 268px;display: table;}
.products-grid .item .product-image a.product-img {display: table-cell;vertical-align: middle;line-height: {SETTINGS_GOODS_IMAGES_SIZE_SMALL | divide("2")}px;}

зашла с мобильного телефона. Картинки отображаются сбоку у всех товаров.
Можно это как-то подправить в мобильной версии? https://prnt.sc/gbr8v3

а второй вопрос, где в коде можно посмотреть размеры картинок на слайдере? хотелось бы уменьшить немного и выводить не по 5 шт, как сейчас, а с учетом уменьшения по шт 7 https://prnt.sc/gbt9c0

#46 Danil

Danil

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 4 645 сообщений

Отправлено 23 Август 2017 - 10:16

Просмотр сообщенияRibka (22 Август 2017 - 21:57) писал:

зашла с мобильного телефона. Картинки отображаются сбоку у всех товаров.
Можно это как-то подправить в мобильной версии? https://prnt.sc/gbr8v3

а второй вопрос, где в коде можно посмотреть размеры картинок на слайдере? хотелось бы уменьшить немного и выводить не по 5 шт, как сейчас, а с учетом уменьшения по шт 7 https://prnt.sc/gbt9c0
Здравствуйте.
В шаблоне html найдите код
	<script>
	  $('#demos .owl-carousel').owlCarousel({
		  nav: false,
		  dots: false,
		  autoPlay: true,
		  autoplayHoverPause: false,
		  smartSpeed: 500,
		  margin:10,
		  navRewind: false,
		  responsive:{
			  0:{
				  items:1
			  },
			  600:{
				  items:3
			  },
			  1200:{
				  items:5
			  }
		  }
	  })
	</script>
и замените на
	<script>
	  $('#demos .owl-carousel').owlCarousel({
		  nav: false,
		  dots: false,
		  autoPlay: true,
		  autoplayHoverPause: false,
		  smartSpeed: 500,
		  margin:10,
		  navRewind: false,
		  items: 7,
		  itemsDesktop: [1199,5],
		  itemsDesktopSmall: [991,3],
		  itemsTablet: [767,2],
		  itemsTabletSmall: [641,1],
		  itemsMobile: [481,1],
	  })
	</script>
В main.css найдите код
.products-grid .item .product-image {position: relative;margin-bottom: 15px;overflow: hidden;height: 268px;display: table;}
и замените на
.products-grid .item .product-image {position: relative;margin-bottom: 15px;overflow: hidden;}
так же найдите код
.products-grid .item .product-image a.product-img {display: table-cell;vertical-align: middle;line-height: {SETTINGS_GOODS_IMAGES_SIZE_SMALL | divide("2")}px;}
и замените на
.products-grid .item .product-image a.product-img {display: flex;height: {SETTINGS_GOODS_IMAGES_SIZE_SMALL | divide("2")}px;align-items: center;}


#47 Ribka

Ribka

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 226 сообщений

Отправлено 23 Август 2017 - 11:00

Просмотр сообщенияDanil (23 Август 2017 - 10:16) писал:

Здравствуйте.
В шаблоне html найдите код
<script>
	 $('#demos .owl-carousel').owlCarousel({
		 nav: false,
		 dots: false,
		 autoPlay: true,
		 autoplayHoverPause: false,
		 smartSpeed: 500,
		 margin:10,
		 navRewind: false,
		 responsive:{
			 0:{
				 items:1
			 },
			 600:{
				 items:3
			 },
			 1200:{
				 items:5
			 }
		 }
	 })
</script>
и замените на
<script>
	 $('#demos .owl-carousel').owlCarousel({
		 nav: false,
		 dots: false,
		 autoPlay: true,
		 autoplayHoverPause: false,
		 smartSpeed: 500,
		 margin:10,
		 navRewind: false,
		 items: 7,
		 itemsDesktop: [1199,5],
		 itemsDesktopSmall: [991,3],
		 itemsTablet: [767,2],
		 itemsTabletSmall: [641,1],
		 itemsMobile: [481,1],
	 })
</script>
В main.css найдите код
.products-grid .item .product-image {position: relative;margin-bottom: 15px;overflow: hidden;height: 268px;display: table;}
и замените на
.products-grid .item .product-image {position: relative;margin-bottom: 15px;overflow: hidden;}
так же найдите код
.products-grid .item .product-image a.product-img {display: table-cell;vertical-align: middle;line-height: {SETTINGS_GOODS_IMAGES_SIZE_SMALL | divide("2")}px;}
и замените на
.products-grid .item .product-image a.product-img {display: flex;height: {SETTINGS_GOODS_IMAGES_SIZE_SMALL | divide("2")}px;align-items: center;}

Отлично :) Спасибо большое за помощь :)




Количество пользователей, читающих эту тему: 0

0 пользователей, 0 гостей, 0 анонимных