Jump to content

Adjust column width or force to stack on tablet?

Go to solution Solved by tuanphan,

Recommended Posts

Site URL: https://cowbell-blue-fs45.squarespace.com/

Hello!

I’m almost finished a site on 7.1 but just realized the 3 columns in the “Services” section of the homepage (Individual Therapy, etc) are a bit too squeezed on a tablet (they’re fine on desktop and stack normally on mobile).  The icons look OK, but the text is wrapping onto the next line. 
 

I’d prefer to keep my columns but just adjust the width so that they display properly on tablet, but alternatively could also use some code that would force just this section to stack on a tablet view.

I don’t want to affect the entire page or site- just this section.

 

Thanks so much in advance for your help!!

 

884C4B94-7074-46B0-9257-AE2B2FFA01E8.jpeg

Edited by Shanhou
Edited to add screenshot; removed site password after no longer needed
Link to comment
  • 1 year later...
On 12/12/2020 at 5:47 PM, tuanphan said:

Add to Home > Design > Custom CSS

@media screen and (max-width:991px) and (min-width:768px) {
[data-section-id="5f8608906f3d51265bd51ce9"] .content {
    width: 100% !important;
}
}

 

@tuanphan

Hello, I am trying to apply a similar layout to my site (changing 4 columns to 2 on specifically portrait-tablet view) while retaining the "Capabilities" drop-downs stacked correctly under each section.

Would you be able to advice on what the CSS would be for that?

redbarrelcreative.com

[Services Section]

Thank you!

Edited by jy15
Link to comment
On 5/10/2022 at 12:58 AM, jy15 said:

@tuanphan

Hello, I am trying to apply a similar layout to my site (changing 4 columns to 2 on specifically portrait-tablet view) while retaining the "Capabilities" drop-downs stacked correctly under each section.

Would you be able to advice on what the CSS would be for that?

redbarrelcreative.com

[Services Section]

Thank you!

Hi,

You need to change to 2 columns on Tablet? for video production, design, branding & consulting?

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

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.