Jump to content

How to centrally align buttons on mobile

Go to solution Solved by tuanphan,

Recommended Posts

  • Replies 13
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

1 hour ago, tuanphan said:

Add to Home > Design > Custom CSS


@media screen and (max-width:640px) {
.sqs-block-button * {
    text-align: center !important;
}
}

 

Thank you so much! This aligned all buttons centrally, brilliant!

Any ideas why some text shows as bold when it's not formatted as bold?

Thanks again, massive help

Link to comment
6 minutes ago, Mum-Folk said:

Thank you so much! This aligned all buttons centrally, brilliant!

Any ideas why some text shows as bold when it's not formatted as bold?

Thanks again, massive help

I checked page code, I found strong tag, I think you made text bold when edit text?

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
1 hour ago, tuanphan said:

I checked page code, I found strong tag, I think you made text bold when edit text?

No I doubled checked. Body copy font is styled without bold and I didn't add it in css either. Only some of the body copy appears bold, whereas other body copy displays as it should! How do I get find/get rid of the strong tag?

Link to comment
12 hours ago, Mum-Folk said:

No I doubled checked. Body copy font is styled without bold and I didn't add it in css either. Only some of the body copy appears bold, whereas other body copy displays as it should! How do I get find/get rid of the strong tag?

You can copy all the text and paste it into facebook status, then copy and paste that text back into the Text Block. Thus the old format will be removed.

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
1 hour ago, Mum-Folk said:

Thanks for the suggestion but this didn't work unfortunately

Seems difficult without checking admin dashboard.

You can wait for someone else, or post to some groups to find support.

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
  • 5 months later...
12 hours ago, MeganF said:

Hi there!

@tuanphan I used this code to center all buttons on mobile only; however, it didn't center the "Add to Cart" buttons for my products. Is there a way to center product buttons, as well?

Thanks in advance!
Megan

Can you share link to product? We can check easier.

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
  • 2 years later...
On 5/5/2023 at 9:04 AM, elizablake said:

Hi @tuanphan this code no longer works for 7.1. Can you please help!

Site: https://violet-impala-rgjr.squarespace.com/

password: celebrate101

Which buttons are you referring to?

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
On 5/8/2023 at 11:24 AM, elizablake said:

I'd like it to work for most buttons on mobile throughout the site, with a couple of exceptions. But I cannot get any to be centred.

You are using new editor, there is no CSS code to target all buttons. Each button you will need a different code.

Or if you use Business Plan/higher, we can try test JavaScript code to achieve this.

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.