Jump to content

Force ipad into two-column layout

Go to solution Solved by tuanphan,

Recommended Posts

Posted

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

Screen Shot 2022-01-27 at 11.34.26 AM.png

  • Solution
Posted

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%;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Posted
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!

  • 2 years later...
Posted

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!

 

Screenshot 2024-02-11 at 11.36.30 AM.png

Screenshot 2024-02-11 at 11.38.09 AM.png

Posted (edited)

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>


 

Screenshot 2024-02-11 at 11.53.44 AM.png

Edited by MaryLou
sent too quickly

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.