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

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 

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 

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

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!

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?