Remove outside padding on collection page & Make images full width

[Streccent]

Hi,

I already managed to lower the padding between the products on a collections page. But now i want to have the same amount of padding on the outside of the images. Now there is a big white border.

Also, how do i get the product images slightly bigger?

store: arterclo.com

Pass: yaifra

EDIT: Edited image to show exactly which area I am talking about.

[Streccent]

Hi Sohel,

No that gap is already the one i have minimized. I want to do the same to the outside (Left of Badges t-shirt black, Right of Cowboy t-shirt white) of the products.

[Mehran_Ali]

hi @Streccent

You can achieve this by using this CSS code

Follow these Steps:

1. Go to the Online Store
2. Edit Code
3. Find theme.css/ base.css

.shopify-section--main-list-collections .collection-list { column-gap: 4px; }

If This Solution Word Kindly Like this And Mark it as a Solution or Buy Me a Coffee

[Streccent]

Hi Mehran,

I have pasted this code at the bottom of theme.css, but nothing has changed

[Streccent]

I don’t seem to have a file named all-products.css.

[Streccent]

This also does not work

[Mehran_Ali]

Are You sure that it saved correctly because the CSS code I provided you is not their in the theme.css

If still didn’t work kindly provide me collaboration code and give me the access I can check the where the issue is rendering the css

[tim_1]

Do you own an ultra-wide monitor? I do and learned that having access to one is a must when you’re designing full-bleed layouts.

You should try making these changes to the “Custom CSS” setting of collection grid section:

1. Add this:

.container {
  --container-gutter: 4px;
}

.collection__main {
  padding: 0;
}

product-list.product-list {
  margin:0;
  --product-list-card-width: calc( 
    (100% - var(--container-gutter) * (var(--product-list-items-per-row) - 1) ) 
    / var(--product-list-items-per-row) 
  );
}

@media (min-width: 1440px) {
  product-list.product-list {
    --product-list-items-per-row: 6;
  }
}

Remove rules like:

--product-list-max-items-per-row-allowed: 99 !important;

Because !important does not work as you expect it to for CSS variables.

Important – the CSS above is designed to work inside Custom CSS, otherwise it will not have required priority.

I do not recommend editing theme code for style edits like one require here.