Force ipad into two-column layout

Site URL: https://www.daraastmanncoaching.com/

Hi All,

I'm trying to force a specific section with four-columns to instead go into a two-column view when on an ipad.  The four columns are just too narrow on the ipad screen and the text spacing gets very unreliable and unappealing. 

The section in question is the second section with the blue background on the homepage (attached screenshot) at https://www.daraastmanncoaching.com/

I've seen some others request similar help, but I've not been able to customize those solutions properly for this website.  Am hoping for any help!  Thanks!

Best,
-Scott

On 1/29/2022 at 7:13 AM, tuanphan said:

Add to Design > Custom CSS

/* 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 worked beautifully - thank you as always!

Could someone PLEASEEEE help me. Unfortunately, this code did not work for me. I am trying to do the exact same for my services section on homepage
cardinalwebservices.net
password: sophy.  (all lowercase)

2nd is the one with your CSS code and my section id

Thank you!

Ok so this is the code I used on the page in the advanced gear icon: 
But it also changes mobile view too.
 

<style>@media only screen and (max-width: 1024px){.user-items-list-simple:not([data-num-columns="1"]) {grid-template-columns: repeat(2,1fr); grid-gap: 10px!important} .list-item-content__title{font-size: 1rem!important}  .list-item{padding: .5rem!important}}</style>

change (max-width:1024px) to

(max-width:1024px) and (min-width:768px)