How can i get my collection page to look like the reference: remove spacing between product cards

Store Design
, ,
1

Screenshot 2023-02-05 223308.png
Screenshot 2023-02-05 223308.png493×352 114 KB

just like the reference image, i want to remove any and all spacing between the product cards, vertical or horizontal without affecting any other spacing on the website, i tried using theme settings where we can change the spacing, but it does not allow to remove it completely. also, i want to remove the space on the sides of the screen as well (as in reference). secondly, i would like to do that only and only for mobile if possible.

my website: www.blinglittlething.com (try if a coding is possible only for mobile)

2

yes, but only in mobile, although i understood how to do it, but what i am doing is effecting other grid items like multicolumns as well. what i specifically want is:

  1. the look you showed above

  2. but only in mobile and tab

  3. but only to impact collection grid and no other kinds of grid.

3

Hii.. @blinglittlethin

step 01:

  1. Go to your Store > Theme > click to edit code.
  2. find this file "base.css " and open.

step 02:

  1. Paste the code at the of the file.
ul.collection-list.grid {
    column-gap: 0px !important;
    row-gap: 0px !important;
}

https://prnt.sc/8FA-SKIgi7Sv

if you want the some gap so please increase in 0 number

hope this idea helps you

4

hey, sorry, i need for product grid on collection page.

5

This works but then the cards are way to the left. Also how do i get the text underneath to be in center of the picture instead of underneath them.

6

in other words how do i center them on desktop and app and put text in center of photos.