Remove the padding between photos in prestige theme

Store Design
,
1

Hello,

how can i remove the spacing ( padding ) between individual photos on collection page in prestige theme. Highly appreciate if someone could point me in the right direction

1 Like
2

Hi @rkamath ,

If you know a bit of coding you can find the selector.

.collection {

padding: 0px;

}

Or If you would mind to share your URL website(with password) so I can give you the specific code. Thanks!

3

the site is www.mykokids.com and the password to access the URL is myko. ( all lower case)

1 Like
4

Hi @rkamath ,

Thank you for the information. I understand that you want to remove the spacing ( padding ) between individual photos on collection page.

  1. From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  2. Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  3. In the “Assets” folder, click on “theme.scss.liquid, styles.scss.liquid or base.css” file, depending on which file your theme uses to store its CSS styles.
  4. At the bottom of the file, add the following CSS code:
  5. And Save.
.CollectionList.CollectionList--grid.CollectionList--spaced a {
    padding: 0px;
}

Result:

Rose_Dim_0-1684606647225.png
Rose_Dim_0-1684606647225.png1349Ă—509 515 KB

This is what you mean right?

I hope it help.

5

To remove the spacing (padding) between individual photos on the collection page in the Prestige theme, you can modify the CSS code. Here’s how you can do it:

  1. From your Shopify admin, go to Online Store > Themes.
  2. Find the Prestige theme and click on the “Actions” button, then select “Edit code” from the dropdown menu.
  3. In the left-hand sidebar, navigate to the Assets folder and locate the “theme.scss.liquid” or “theme.css” file.
  4. Open the file and scroll to the bottom or search for the existing CSS code related to the collection page.

If you’re using “theme.scss.liquid”, add the following CSS code at the bottom of the file:

.template-collection .grid-product__wrapper {
  margin-right: 0;
  margin-bottom: 0;
}
6

Not using template.scss.liquid . There is template.liquid . Can I add the code to that file . No clue on coding . Thank you

7

I think you have _app.css find this one in asset folder. And just paste on the bottom.

8

Hi, this did the trick. however it applied it to the photos on the home page also. like in the screenshot you included earlier. Also the featured collection, it still shows the spacing between the images. Is there any way to modify the code to include featured collection and exclude the photos on the home page.

9

Thank you for the above code. Very helpful and much appreciated. This code doesn’t affect the items on the home page . We have got a featured collection that is added to the homepage. Wanted to modify the padding for that also. Any thoughts on how that could be done. wanted to retain the way the photos are on the top section, but on the collection Best Seller, change the padding to make it 0px

10

Thank you and your kind assistance is much appreciated. I went to customize the theme and added the code under default collections and featured collections custom CSS and it works like a charm.