Jump to content

Is there a way to change the way that list section appears at tablet widths? (in between desktop and mobile widths)

Recommended Posts

Hi Everyone, 

Wondering if there is a hack or code that we can use to change the way a list section appears at tablet-ish screen sizes....I've used a simple list section and have 4 items. At one point in the responsive design, only one item appears on a second row and it looks a bit crummy. I still want all the items side by side on desktop so I have selected 4 columns. 

I wonder if there would be a way for it to change to 2 rows with 2 items when it reaches a certain screen width, let's say 991 pixels?

site is https://clinicaleftconnect.squarespace.com and password is cec2024

Thanks! 

Ioana 

Screenshot 2024-05-07 at 2.51.07 pm.png

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

Top Posters In This Topic

Top Posters In This Topic

Posted Images

10 hours ago, ILong said:

Hi Everyone, 

Wondering if there is a hack or code that we can use to change the way a list section appears at tablet-ish screen sizes....I've used a simple list section and have 4 items. At one point in the responsive design, only one item appears on a second row and it looks a bit crummy. I still want all the items side by side on desktop so I have selected 4 columns. 

I wonder if there would be a way for it to change to 2 rows with 2 items when it reaches a certain screen width, let's say 991 pixels?

site is https://clinicaleftconnect.squarespace.com and password is cec2024

Thanks! 

Ioana 

Screenshot 2024-05-07 at 2.51.07 pm.png

You can try the following code to set style with the breakpoint from 768px to 991px (as you require)

@media only screen and (max-width: 991px) and (min-width: 768px) {
  section[data-section-id="6639afd34d3f795b7603a8a5"] .user-items-list-item-container
  {
    grid-template-columns: repeat(2, 1fr);  
  }

}

Let me know how it works on your site

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment

Hi @Beyondspace. Thanks for the idea! It didn't seem to do anything when I put your suggested code in. I've made a duplicate section which has the 2x2 format and I'm trying to figure out the breakpoint when to hide the desktop version just as it moves to that weird layout and show the 2x2 instead. Haven't quite figured out the right dimension yet but I'm going to try this approach!

 

Link to comment
On 5/8/2024 at 9:14 AM, ILong said:

Hi @Beyondspace. Thanks for the idea! It didn't seem to do anything when I put your suggested code in. I've made a duplicate section which has the 2x2 format and I'm trying to figure out the breakpoint when to hide the desktop version just as it moves to that weird layout and show the 2x2 instead. Haven't quite figured out the right dimension yet but I'm going to try this approach!

 

My code works with the screen from 768px to 990px.

I can not see my code on your site as well as the duplicate section as you mentioned. Can you share the link URL you are working on?

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

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.