Dawn Theme - Image Size in Featured Collection on Main Page is too big

Store Design
1

Hello,

When adding products to the Featured Collection slider box on the main page, they appear way too large. Image size seems to be controlled by either the page width, or the columns inside the box, or both. The theme editor only allows for 5 columns to be added. So if you only want 2 columns, the images are enormous, and scale down if you add more columns.

I’m trying to scale down the image size of products inside the Featured Collection slider box, but can’t seem to find anywhere how to adjust it.

2

Hi @ImNewToThis !

This is PageFly - Advanced Page Builder. I would love to give you some recommendation.

  1. Go to Online Store->Theme->Edit code
  2. Asset->/base.css ->paste below code at the bottom of the file.

@media screen and (min-width: 990px) {
#product-grid .grid__item {
width: calc(25% - var(–grid-desktop-horizontal-spacing) * 3 / 4);
max-width: calc(25% - var(–grid-desktop-horizontal-spacing) * 3 / 4);
}
}

Best Regards;

Pagefly

3

be sure to save your theme files this might break other aspects of the dawn theme

in your code base.css there is a class classed .grid__item and it has a item called flex-grow if you delete flex-grow it will fix the big photos problem… however again it might break other aspects..

I really suggest you just find 2 other items to make it smaller or a better layout

4

Thanks for response. I pasted that at the end of the page, and it seems to have done nothing :disappointed_face: I attempted to change the 25% and the 3/4, which also changed nothing.

5

Brother @ImNewToThis please send page URL I will inspect and send code accordingly.

6

I don’t really mind if it changes with the size of monitor, or size of the container it sits in. I’m just looking to make the pictures smaller overall, not exactly to remove any functionality.

I have enough products to reach the maximum allowed by the slider (12), but it’s the columns that seem to be controlling the size of the images. For example:

I set the columns to 5, total items to 12. They look too big already. If I decrease the items to 5, keep columns at 5, the size doesn’t change at all. If I change the columns to 2, the pictures are enormous. I mean, 3/4 of the screen big.

7

@ImNewToThis Please send page URL thanks.

8

Did you get this fixed? I’m having the same issue… tried that code… did nothing… changed the numbers in different ways… all did nothing. If you got it fixed, do you know how?