Jump to content

Wrap grid of related products on mobile

Go to solution Solved by Lesum,

Recommended Posts

Hi, I've added CSS to make my related products smaller on my product pages, but now they go off the screen in mobile. So my question is how to get the related products to wrap in mobile? Any suggestions appreciated!

greenhillforge.com/shop

password: shop

Here's the code I'm using to make my related products smaller:

//related products grid size//
.ProductItem-relatedProducts .list-grid
{grid-template-columns: 200px 200px 200px 200px !important;
font-size: .75rem;
line-height: 2rem;
}

Thank you!

Link to comment
  • Replies 3
  • Views 120
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

  • Solution

@specialdale Hi! You can add the add this code in Website > Pages > Website Tools > Custom CSS, to address the issue and wrap all the related products in the same row:

@media only screen and (max-width: 1024px) {
#pdp .ProductItem-relatedProducts .list-grid {
    grid-template-columns: 1fr 1fr 1fr 1fr !important;
    grid-column-gap: 10px !important;
	grid-row-gap: 10px !important;
}
}

 

If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. 

Sam
Web Developer & Digital Designer

 Did you find my contribution helpful? Buy me a coffee?

Link to comment

@Lesum wonderful, thank you!! 

That worked, and I altered the code a bit so the related product sizes on desktop view would still be smaller, in a row of 4 columns. In case it helps anyone else, here it is--

@media only screen and (max-width: 767px) {
#pdp .ProductItem-relatedProducts .list-grid {
    grid-template-columns: 1fr 1fr !important;
    grid-column-gap: 10px !important;
    grid-row-gap: 10px !important;
}
}

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.