Need help with grid on collection page

Store Design
, , , ,
1

Hi, I need help with the grid on my collection page I’ve included two pictures. First I’d like the grid to be flush with the filter sort buttons, the second is there’s a gap between the grid items and also some items seem to be shorter then others. Thank you - my site is Women's Perfume

IMG_1382
IMG_13821179×2556 145 KB

IMG_1381
IMG_13811179×2556 199 KB

2

From the theme code editor open your theme.css file and look for this

image
image386×102 3.06 KB

.collectio-grid__wrapper…. When you find it just change the 20 to 0

Also on the same file look for this

image
Change the 10 to 0.

3

Dear @Luxurymrkt

Here are some instructions for you:

  1. Go to your Shopify Online Store admin page > Themes.
  2. Click the three dots (…) (or Actions) next to your current theme and select Edit code.
  3. Find the file named base.css (or theme.css, component-card.css depending on the theme).
  4. Scroll to the bottom of the file and paste the following CSS code:

@media screen and (max-width: 749px) {

  .collection-grid__wrapper .grid.grid--uniform.small--grid--flush >div {
    margin-top: 0 !important;
  }
  
  .grid-product__price {
      display: none !important;
  }
}

image
image1700×1019 134 KB

4

Hi @Luxurymrkt

First, you should check theme setting if theme not support setting change grid gap and column item, you can change it by css style.

image
image744×1322 105 KB