Solved

How to get product grid item to be directly touching eachother like this?

merchabellire
Tourist
19 0 1

merchabellire_0-1704864439998.png

I want to make a product layout like this where all the products touch each-other with the consistent black border, how can this be done? site is abellire.shop 

Accepted Solution (1)

PageFly-Richard
Shopify Partner
4079 913 1566

This is an accepted solution.

Hi @merchabellire 

 

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>
	@media screen and (max-width: 767px){
.collection.page-width {
padding: 0;
    max-width: 100%;
}
ul#product-grid {
    column-gap: 0 !important;
    row-gap: 0 !important;
}
ul#product-grid li.grid__item {
    max-width: 100%;
}
}
</style>

PageFlyRichard_0-1704869180231.png

 

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!


PageFly - #1 Page Builder for Shopify merchants.


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

View solution in original post

Replies 7 (7)

Moeed
Shopify Partner
3554 893 1111

Hey @merchabellire 

 

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 </body> tag

<style>
ul#product-grid {
    column-gap: 0 !important;
    row-gap: 0 !important;
}
</style>

RESULT:

Moeed_0-1704867759791.png

 

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

 

Best Regards,
Moeed

Need a Shopify developer? Chat on WhatsApp


- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Your Coffee Tip and my code, A perfect blend. ❤️
Canva to Shopify in clicks - Free App
merchabellire
Tourist
19 0 1

Thank you! How do I make it reach across the whole screen instead of having the padding on the sides? 

Moeed
Shopify Partner
3554 893 1111

Hey @merchabellire 

 

Keep the previous code and add this new code above </style> in theme.liquid file

.collection.page-width {
    padding: 0 !important;
}

RESULT:

Moeed_0-1704869211404.png

 

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

 

Best Regards,
Moeed

Need a Shopify developer? Chat on WhatsApp


- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Your Coffee Tip and my code, A perfect blend. ❤️
Canva to Shopify in clicks - Free App
merchabellire
Tourist
19 0 1

Awesome thank you!

Moeed
Shopify Partner
3554 893 1111

Thank you for your reply. I'm glad to hear that the solution worked well for you. If you require any more help, please don't hesitate to reach out. If you find this information useful, a Like would be greatly appreciated.

Need a Shopify developer? Chat on WhatsApp


- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Your Coffee Tip and my code, A perfect blend. ❤️
Canva to Shopify in clicks - Free App

PageFly-Richard
Shopify Partner
4079 913 1566

This is an accepted solution.

Hi @merchabellire 

 

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>
	@media screen and (max-width: 767px){
.collection.page-width {
padding: 0;
    max-width: 100%;
}
ul#product-grid {
    column-gap: 0 !important;
    row-gap: 0 !important;
}
ul#product-grid li.grid__item {
    max-width: 100%;
}
}
</style>

PageFlyRichard_0-1704869180231.png

 

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!


PageFly - #1 Page Builder for Shopify merchants.


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

merchabellire
Tourist
19 0 1

Awesome, thank you this one works too! Is it somehow possible to stop the lines from overlapping and just have a consistent 1px border?