CUSTOM SECTION IN DAWN 5.0.0. HOW TO REDUCE SIZE OF PRODUCT IMAGE ?

Store Design
1

I have a custom section in Dawn 5.0 which is a product slider. I am trying to make the products (carousels in slider) smaller. This section looks too big. The products in the slider are way too big. I wanted to make it similar in size to the Featured Collection section. What part of this CSS code would control that? (I got this code from a youtube video. and I don’t know CSS). My shop is rosesands.myshopify.com password: website. The product slider is near the bottom before the marquee. Thank you for your help.

.dawn-product-slider { max-width: 1600px; margin: auto; padding: 0 0px; padding-bottom: 0px; padding-top; 0px; margin-top: 0px; } .dawn-product-slider img { width: 100%; } .dawn-product-slider .carousel-cell { background: {{section.settings.frame}}; border-radius: 16px; margin: auto; padding: 18px; margin: 12px; width: calc(32% - 10px); } .product-btn { width: 100%; } .dawn-product-slider a { color: black; text-decoration: none; } .dawn-product-slider a .title:hover { text-decoration: underline; } .dawn-product-slider a .title, .dawn-product-slider a .price { margin: 0px; } .dawn-product-slider .flickity-button.flickity-prev-next-button.previous, .dawn-product-slider .flickity-button.flickity-prev-next-button.next { background: transparent; {% comment %} COLOR OF THE BUTTON BACKGROUND. THE COLOR OF THE > INSIDE THE BUTTON IS navigation_color WHICH YOU SELECT VIA CUSTOMIZE {% endcomment %} color: black; } .dawn-product-slider:focus-visible, .dawn-product-slider .carousel:focus-visible { outline: unset; outline-offset: unset; box-shadow: unset; } @media only screen and ( max-width: 767px ) { .dawn-product-slider .carousel-cell { width: calc(30% - 10px); } } @media only screen and ( max-width: 479px ) { .dawn-product-slider .carousel-cell { width: calc(100% - 10px); } }
2

Hi @Smiley1311 ,

Please change code here:

Screenshot.png
Screenshot.png868×566 29 KB

Code:

width: calc(22% - 10px);

Hope it helps!

3

@LitCommerce Thank you for your response. I tried it and it doesn’t work. I tried changing it to 10% just to see if perhaps 22% was too high of a value and it didn’t work.

4

Hi @Smiley1311 ,

Go to Assets > base.css and paste this at the bottom of the file:

@media only screen and (min-width: 1201px) {
	.dawn-product-slider .carousel-cell {
		width: calc(22% - 10px) !important;
	}
}