Increase gap in featured collection section

Increase gap in featured collection section

margaretstick1
Visitor
3 0 0

Hi! I am trying to make my images smaller and the space between them larger in my featured collection section on my home page. I have tried a few code options given to others asking similar questions, but none have worked.

 

Here is a preview of my store:

https://jibberishstudio.com/

 

And here is a screenshot of the section I am wanting to adjust. The gap between the photos is way too close for my liking and I want to adjust it. Hope to hear back soon, Thank you!

margaretstick1_0-1727824102082.png

 

Replies 2 (2)

PageFly-Richard
Shopify Partner
5011 1120 1805

Hi @margaretstick1 

 

This is Richard from PageFly - Shopify Page Builder App

 

Please add this code to your theme.liquid above the </head> to get this solved

Step 1: Online Stores > Themes > More Actions > Edit code

Step 2: click on theme.liquid and paste the code above the </head>

<style>
.collection .product-grid {
    column-gap: 20px;
}
</style>

Note: You can change the value of 20px to any value that match with your requirements

 

Hope this can help you solve the issue 

 

Best regards,

Richard | PageFly

Please let me know if it works by giving it a Like or marking it as a solution!


➜ Optimize your Shopify store with PageFly Page Builder (Free plan available) 


All features are available from Free plan. Live Chat Support is available 24/7.

margaretstick1
Visitor
3 0 0

Thank you! This solved the gap, but now the images are still the same size and are creating 2 rows rather than staying on one row and sizing down with the gap expanding