Product lisings too large

[LaurenB91]

Hello,

Hoping someone can help. I need to drastically reduce the size of my product listings to smaller icons but I have no idea how to do this. They take up almost all of the screen on all devices. (Dawn)

Thanks

Lauren

[Moeed]

Hey @LaurenB91

Welcome to Shopify Community! Can you share your Store URL so I can have a look on it? Also, if you have password enabled then please share the password as well. Your cooperation would be greatly appreciated.

Best Regards,
Moeed

[LaurenB91]

Hi Moeed,

Thanks for your reply

https://boundlesscompanions.co.uk/

Lauren

[BSSCommerce-B2B]

Hi @LaurenB91 ,
Step 1: Go to Shopify Admin → Online Store ->Theme → Edit code

Step 2: Search file base.css, theme.css, styles.css, custom.css or theme.scss.liquid

Step 3: Insert the below code at the bottom of the file → Save

.collection ul#product-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 30px;
}
.collection ul#product-grid li {
    width: 20%;
}

Here is result:

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you

[Moeed]

Hey @LaurenB91

Follow these Steps:

1. Go to Online Store

2. Edit Code

3. Find theme.liquid file

4. Add the following code in the bottom of the file above tag

RESULT:

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[BSS-TekLabs]

• Here is the solution for you
• Please follow these steps:

• Then find the base.css file.
• Then add the following code at the end of the file and press ‘Save’ to save it.

#product-grid {
     display: grid !important;
    grid-template-columns: auto auto auto !important;
}
#product-grid li {
 width: 95% !important;
}

• If you want 4

#product-grid {
     display: grid !important;
    grid-template-columns: auto auto auto auto !important;
}
#product-grid li {
 width: 95% !important;
}

• Here is the result you will achieve:

• Please press ‘Like’ and mark it as ‘Solution’ if you find it helpful. Thank you.

[LaurenB91]

Thanks all! Much better!