Jump to content

Service Section - Full Width Button on Mobile?

Go to solution Solved by Web_Solutions,

Recommended Posts

Hey there, 

I used one of Squarespace's pre-designed "services" sections to display the types of therapy my client is offering. (Landing page, scroll down towards the bottom) 

It works well, but I can't get the button to span the entire width on mobile. It's the only button on the entire site that isn't cooperating - and I suspect it's because it is included in the section and not freestanding. 

How can I get this button to span the full width in mobile view only? 

(I've tried a few code snippets I've found online, but I'm a newbie and am fairly sure I'm not doing it correctly)

Thanks!

IMG_7982.PNG

Link to comment
  • Solution
4 minutes ago, swinterrr said:

Hey there, 

I used one of Squarespace's pre-designed "services" sections to display the types of therapy my client is offering. (Landing page, scroll down towards the bottom) 

It works well, but I can't get the button to span the entire width on mobile. It's the only button on the entire site that isn't cooperating - and I suspect it's because it is included in the section and not freestanding. 

How can I get this button to span the full width in mobile view only? 

(I've tried a few code snippets I've found online, but I'm a newbie and am fairly sure I'm not doing it correctly)

Thanks!

IMG_7982.PNG

Add these code on Custom CSS panel in Website Utilities Website Tools > Custom CSS.

@media screen and (max-width: 767px)  {
    [data-section-id="653d4b9a2c38536f72c7950e"] .list-section-button {
        width: 100% !important;
        box-sizing: border-box !important;
    }
}

 

Screenshot_480.png

If my comments are useful, please like and mark my solution as answer. It will encourage me. Thanks

MD Rofik
Website Designer and Digital Marketer

Am I helpful? Want to offer me a coffee?
Send me a message if needed any help. I'll try to reply as soon as possible.


 

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.