Remove padding from product collection and make images bigger desktop

Store Design
, ,
1

hi my website is www.studio-seductress.com

password: yesyesyes

Dawn theme

I would like the image size increased and the space between descresed. Exactly like this please

Screenshot 2025-02-11 at 6.39.33 PM.png
Screenshot 2025-02-11 at 6.39.33 PM.png2924×1630 616 KB

2

Hello @studioseductres

You can add a custom CSS to reduce that space. Go to the Online store → Click on the customize button and click on the settings → Find custom CSS settings

https://prnt.sc/u86igfx8RO-8

.card__inner.color-accent-2.gradient.ratio {
	width: 100% !important;
}

Once you add this CSS in your custom CSS settings the result will be like this.

https://prnt.sc/rJFeNMaoMRdc

If you require further help, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated. And if this solves the problem, please Mark it as Solution!

3

@studioseductres

Please add the following CSS code to your assets/base.css bottom of the file.

@media (min-width: 990px) {
    .collection .grid {
        gap: 0px 40px !important;
    }
}

.card__inner.color-accent-2.gradient.ratio {
    width: 100% !important;
    height: auto !important;
}

Thanks!

4

Hi that didnt work

5

Hi @studioseductres

You can follow this instruction:

  1. Go to Shopify > Theme > Customize

  2. Copy and paste this code on Theme settings > Custom CSS section

.card__inner.color-accent-2.gradient.ratio {
    width: 110% !important;
    height: auto !important;
}

Result:

LizHoang_0-1739254687109.png
LizHoang_0-1739254687109.png1523×800 236 KB

Thank you

6

Thanks that worked but is it possible to make the spacing in between the photos less and some padding on the side. Like they have. there website is:
https://prod.net/collections/shop-all?srsltid=AfmBOoqNju_Hgtrs9Q19YuX37cJH_wK8WESwAv4Na_wzOHwjnCvbzw7N

For reference. Thanks so much

7

Thanks this worked well but now the title and price of products looks a bit weird, any way to move the product title/price up and then make less space between the next row of photos?

8

@studioseductres

If you want the space on left and right then we have to update whole grid structure of the Dawn theme.
You can try below CSS at the same place but make sure don’t use 105% CSS it should be 100%.

@media screen and (min-width: 750px) {
.collection.page-width {
	padding-left: 14px;
	padding-right: 14px;
}
#product-grid.grid {
	column-gap: 0 !important;
}
#shopify-section-template--24119740629282__product-grid .card__inner.color-accent-2.gradient.ratio {
  width: 100% !important;
  height: auto !important;
}
#product-grid.grid--3-col-desktop .grid__item {
	width: 33.33%;
	max-width:33.33%;
	padding-left:7px;
	padding-right:7px;
}
}

https://prnt.sc/m17KWl0yLYSc Please check the result after add this CSS.

Try above CSS and it will be fixed for you.

9

Hi @studioseductres

You can follow this instruction:

  1. Go to Shopify > Theme > Customize

  2. Copy and paste this code on Theme settings > Custom CSS section

.card:not(.ratio)>.card__content {
    margin-top: -20px;
    margin-bottom: -30px;
}
10

Thanks but now the mobile looks distorted sorry

11

@studioseductres

Try this. https://community.shopify.com/post/2945748