Force ipad into two-column layout

Hello please i need some help here

Please I need help with this 
I attached the picture 
I want is in 2 layout on ipad it currently is not readable for elders right now 
Please help me

Could you share your website URL and the page this is on?

This is the url www.backwhen.com.au
Home page

I want it to adjust to 2 layout on ipad view 
The mobile and desktop looks okay

@ZiggyDid you get this please

There's not a great way to do this with image blocks in the grid, but if you set up a "list section" otherwise known as an "auto layout section" you can control the grid layout on tablet. 

https://support.squarespace.com/hc/en-us/articles/360057763852-Auto-layouts

Select the grid layout with 4 columns.

@ZiggyThank you so once i do that will that automatically change to 2 layout on ipad ?

I am about doing that now tho

31 minutes ago, Shellyj said:

@ZiggyThank you so once i do that will that automatically change to 2 layout on ipad ?

I am about doing that now tho

No not automatically, but I can give you a snippet of code to achieve this.

Okay please do 

@Ziggy

@Ziggy
Please I am still waiting on your response

On 8/8/2024 at 7:16 PM, Ziggy said:

Select the grid layout with 4 columns.

You haven't set the grid to 4 columns, it's currently 2.

Once you've done that, add this code.

@media screen and (min-width: 640px) and (max-width:940px) {
    .user-items-list-simple {
        grid-template-columns: 1 fr 1fr !important;
    }
}

Okay 
I changed it before i was only trying to see if the 2 layout will work when i didn't get a response 
But I am about changing back and using the codes provided 
Thank you so much I will let you know if that works 
I will have someone check on their ipad view for me
Or is there a way you can check from your end if I did it correctly please 
 

@Ziggy

@Ziggy Still same

I had small typo, a space where there shouldn't be one, use this instead:

@media screen and (min-width: 640px) and (max-width:940px) {
    .user-items-list-simple {
        grid-template-columns: 1fr 1fr !important;
    }
}

It's still the same

This are the codes i have can you help fix in the correct one incase i didn't put it well 

@media screen and (min-width: 768px) and (max-width: 1024px) {
  .your-element-class {
    padding: 20px;
    font-size: 18px;
  }
}
/* Style image boxes in a grid layout */
.image-box-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px; /* Adjust spacing as needed */
}

.image-box {
  width: 100%;
  height: auto;
  object-fit: cover; /* Maintain aspect ratio and cover the box */
}
/* Homepage-Tablet-2columns */
@media screen and (max-width:1024px) and (min-width:768px) {
div#page-section-617842b2b7108941f46ea0cd .span-6 {
    width: 100%;
}
div#page-section-617842b2b7108941f46ea0cd .span-6 ~ .span-3 {
    width: 50%;
}
  @media screen and (min-width: 640px) and (max-width:940px) {
    .user-items-list-simple {
        grid-template-columns: 1fr 1fr !important;
    }
}
}

}

@Ziggy

Can you help take out the unneeded one please
I tried so many things trying to fix this

Yayyy
It worked 
Thanks for all of your help 
@Ziggy

1 hour ago, Ziggy said:

@media screen and (min-width: 768px) and (max-width: 1024px) {
  .your-element-class {
    padding: 20px;
    font-size: 18px;
  }
}

This looks like it template CSS that hasn't been customized, is it doing anything?

1 hour ago, Ziggy said:

/* Style image boxes in a grid layout */
.image-box-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px; /* Adjust spacing as needed */
}

.image-box {
  width: 100%;
  height: auto;
  object-fit: cover; /* Maintain aspect ratio and cover the box */
}

I don't know what this is for, was it to try and get the two columns on tablet for a previous attempt?

1 hour ago, Ziggy said:

/* Homepage-Tablet-2columns */
@media screen and (max-width:1024px) and (min-width:768px) {
  div#page-section-617842b2b7108941f46ea0cd .span-6 {
    width: 100%;
  }
  div#page-section-617842b2b7108941f46ea0cd .span-6 ~ .span-3 {
    width: 50%;
  }
}

This looks like another attempt, but using a classic editor section?

This all could be removed potentially, but I don't know for sure.

Thank you 
Will do away with them 

24 minutes ago, Shellyj said:

Will do away with them 

You can always replace if you keep a backup and find they were doing something important.