Adjust Collection Page Card Sizing (Dawn 9.0.0)

[WholesomeBoy]

Hey guys,

I am looking to minimize the space between the product cards and also connect the end cards of each row to the sides of the page!

Website: Wholesome Boy

Example of what I want (first row):

[NomtechSolution]

1. Look for a file named something like theme.scss.liquid or styles.scss.liquid. This file contains the CSS code for your theme’s styling.

2. Open the file and scroll down to find the section related to product card styles. Look for selectors that target product cards or product grid elements.

3. Modify the CSS properties to adjust the spacing between the product cards. Here’s an example:

.product-card {
  margin-bottom: 10px; /* Adjust the margin-bottom value to decrease the spacing between cards */
}

1. You may need to replace .product-card with the appropriate selector used in your theme’s CSS for product cards.

2. To connect the end cards of each row to the sides of the page, you can remove the left and right margins from the product grid container. Look for the selector that targets the product grid container, and modify the CSS properties. Here’s an example:

.product-grid {
  margin-left: 0; /* Remove left margin */
  margin-right: 0; /* Remove right margin */
}

[saim007]

@WholesomeBoy Just follow below steps-

1. Go to Online Store

2. Click on Edit Code

3. Find and open theme.liquid file

4. Find for tag above this tag paste below code

It will look like this-

Please let me know when works and mark as solve!

[WholesomeBoy]

Hello sir,

I need it to stay centered and also connect the end cards to the side of the page!

Thanks,

Justin

[saim007]

@WholesomeBoy What need to stay centered and end cards to the side? i didn’t understand can you please explain with the highlight screenshots ?

[WholesomeBoy]

[saim007]

@WholesomeBoy Just follow below steps-

1. Go to Online Store

2. Click on Edit Code

3. Find and open theme.liquid file

4. Find for tag above this tag paste below code

[omero]

Hello there,

My webiste is this: Divine Design

Here is my current collection page on mobile view:

Here is the look I want for mobile view:

1. I need to remove right and left space,

2. I need to make the padding between product cards smaller

I would really appreciate your help thanks very much