Resizing buttons for mobile view

Hello! How can I resize the buttons on my website to be smaller for mobile view? On desktop, the button size is small but when I change to mobile view the buttons compress into a big button

Hi @BritterBeez

Could you share your website link here? I will send you the css code.

Hi @moeezali

Here is my website: https://www.britterbeez.com/

Thank you so much!!

@BritterBeez

Please check if this works for you:

@media(max-width: 767px) {
	a.sqs-block-button-element {
      padding: 0.8em 0.3em !important;
      display: inline-block;
	}
}

@moeezali

Yes, thank you!!!

I tried this CSS in 7.1, and it did not work for me.  Is there a fix for 7.1?  I just want the buttons to be smaller and proportional when on mobile.

On 7/21/2020 at 3:07 AM, jjjuliejj said:

I tried this CSS in 7.1, and it did not work for me.  Is there a fix for 7.1?  I just want the buttons to be smaller and proportional when on mobile.

If you share link to your site, we can take a look

Hi! 
I have the same problem: I can't resize the button on mobile view. Does anyone know how to do it? The code mentioned above doesn't work for me.

site's URL: https://www.flockfestival.se/

password: squarespace

Thanks in advance!

On 2/9/2023 at 9:01 PM, ebbah said:

Hi! 
I have the same problem: I can't resize the button on mobile view. Does anyone know how to do it? The code mentioned above doesn't work for me.

site's URL: https://www.flockfestival.se/

password: squarespace

Thanks in advance!

You mean this button?

Yes, exactly. That one, but also for the other buttons on the site (for now I have two in total) would be nice to get smaller in the mobile view.

I am also wondering how to style this section so that the names doesn't get cut off in the bottom: 

Same site and password.

On 2/13/2023 at 9:56 PM, ebbah said:

I am also wondering how to style this section so that the names doesn't get cut off in the bottom: 

Same site and password.

#1. Add to Design > Custom CSS

@media screen and (max-width:767px) {
div.button-block a[class*="sqs-block-button-element"].sqs-block-button-element {
    font-size: 16px !important;
    padding: 10px 20px !important;
    height: auto !important;
}
}

#2. Name looks fine. Did you solve it?

On 2/15/2023 at 1:42 PM, tuanphan said:

#1. Add to Design > Custom CSS

@media screen and (max-width:767px) {
div.button-block a[class*="sqs-block-button-element"].sqs-block-button-element {
    font-size: 16px !important;
    padding: 10px 20px !important;
    height: auto !important;
}
}

#2. Name looks fine. Did you solve it?

#1. Thanks, it works but how do I decrease the sides of the button? 

#2. No, the names still get cut off, look at the g in "Öberg" for example. How do I code so that it gets more space in the bottom and dosen't get cut off?

On 2/23/2023 at 4:37 PM, ebbah said:

#1. Thanks, it works but how do I decrease the sides of the button? 

#2. No, the names still get cut off, look at the g in "Öberg" for example. How do I code so that it gets more space in the bottom and dosen't get cut off?

You can adjust this line

  padding: 10px 20px !important;