Adjust column width or force to stack on tablet?

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

That worked, thank you so much!!!!

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!

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?