Jump to content

Elements Won't Collapse Properly

Recommended Posts

Under my first recommendation, for tents (see photo) I'm struggling to get the products to collapse properly. Below 586px it seems, the products on the first line push the second product down to a third line instead of following in order on the second. I'm sure itʻs a simple css fix, but I can't seem to figure it out.

https://noahlangphotography.com/blog/best-ultralight-hiking-backpacking-gear

 

Thank you!

Screenshot 2024-06-30 at 12.51.57 PM.png

Edited by noahawaii
Link to comment
  • Replies 3
  • Views 270
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

@noahawaii I see that the product block is entirely custom coded, so it should be an easy fix. In your code, the first four products are inside the same block, while the last product is in a completely different block. If all the products were in the same block, we could target them using CSS only.

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
2 minutes ago, Lesum said:

@noahawaii I see that the product block is entirely custom coded, so it should be an easy fix. In your code, the first four products are inside the same block, while the last product is in a completely different block. If all the products were in the same block, we could target them using CSS only.

It has to be that way because they are separate products really. In my writing, I may recommend one product where I just need the tents or the other where I just need the bag. Sometimes both which is when they won't collapse correctly. I could remove the .products div as I tried to find the solution that way but the .products-block divs with the separate data tags are really whats needed to load in the products remotely.

Link to comment
  • 2 weeks later...
On 6/30/2024 at 1:17 PM, noahawaii said:

It has to be that way because they are separate products really. In my writing, I may recommend one product where I just need the tents or the other where I just need the bag. Sometimes both which is when they won't collapse correctly. I could remove the .products div as I tried to find the solution that way but the .products-block divs with the separate data tags are really whats needed to load in the products remotely.

That's not the solution. While that would work, I need to find a way to make it work as is for my writing and organization. That's why I wrapped multiple products-block divs in a class called products because there should be a way to find the solution another way.

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.