Homepage - making the gap between a collection more compact

Solved
Highlighted
Tourist
20 0 1

Hi Everyone,

I have searched high and low for an answer, and I am really struggling to find a solution.

On the home page i have a section for showcasing products, there is 3 rows and 5 in each row...

Collections.png

Can anyone tell me how to make the gaps a bit smaller, feel that a more compact look would help the layout of the page..

Stuart

0 Likes
Highlighted
Shopify Partner
2213 481 625

Hey @trendybike,

Please provide your website URL. I will check and provide a solution here.

Thanks!

If helpful then please Like and Accept Solution.
Do you need custom changes on store ? Hire me.
Feel free to Contact me on dmw.webartisan@gmail.com
Follow us on Instagram @dmw.webartisan
0 Likes
Highlighted
Tourist
20 0 1

Thanks for the response...

It is...

https://trendybikeclothing.co.uk/

 

Stuart

0 Likes
Highlighted
Shopify Partner
2213 481 625

This is an accepted solution.

Hey @trendybike,

Please add the following code at the end of your assets/theme.scss.liquid file.

.grid-view-item__image {
    max-width: 199px !important;
    max-height: 199px !important;
    width: 100%;
}

.grid-view-item__image-wrapper {
    width: 100%;
    min-width: 199px !important;
    min-height: 199px !important;
}

 

You can adjust width and height as per your need.

Hope this will work for you.

Thanks!

If helpful then please Like and Accept Solution.
Do you need custom changes on store ? Hire me.
Feel free to Contact me on dmw.webartisan@gmail.com
Follow us on Instagram @dmw.webartisan
0 Likes
Highlighted
Tourist
20 0 1

Hi @dmw.webartisan

Worked a treat.. thank you

 

Stuart

1 Like