How can I resize the buttons on my website to be smaller for mobile view?

Site URL: http://www.marenberg.dk

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

I used the following code to resize the button on my frontpage header image, but how can I resize the other buttons?:

@media screen and (max-width:640px) {
a.sqs-block-button-element--large.sqs-block-button-element {
    font-size: 11px;
}
}

Hey @Marenberg You can use next classes for the medium and small buttons on the site:
.sqs-block-button-element--medium
.sqs-block-button-element--small
Just add same code but change "large" to the preferred button style (small, medium). System buttons like a form button, product etc has a different class, so You should to get a correct class for the system buttons and then add custom styles for mobile view.

Thank you! 🙂 How can I resize a form button like a "purchase" button on a product page?

On 2/21/2022 at 8:12 PM, Marenberg said:

Thank you! 🙂 How can I resize a form button like a "purchase" button on a product page?

Use this code

.sqs-add-to-cart-button-inner {
    font-size: 11px;
}

11 hours ago, tuanphan said:

Use this code

.sqs-add-to-cart-button-inner {
    font-size: 11px;
}

 

It worked perfectly! Thank you 🙂

Quote

How do I resize buttons for mobile view for poster block and card blocks?

4 hours ago, christina_marie_333 said:

 

Add to Design > Custom CSS

/* Posters cards buttons mobile */
@media screen and (max-width:767px) {
	.design-layout-poster a {
		font-size: 12px !important;
}
.design-layout-card a {
	font-size: 11px !important;
}
}

Im having the same issues, im version 7.1 and my button on mobile view which has CSS in now on my header (was in burger menu before).. bit its quite far to the left and needs moving in (I've reduced logo padding, so there is space). However I think overall I need just code to reduce button and text size..cant seem to find a code that does.. please help 

22 hours ago, saradicarlo1 said:

Im having the same issues, im version 7.1 and my button on mobile view which has CSS in now on my header (was in burger menu before).. bit its quite far to the left and needs moving in (I've reduced logo padding, so there is space). However I think overall I need just code to reduce button and text size..cant seem to find a code that does.. please help 

 

What is your site url? We can check easier

Help, i am having issues !! The same thing with my button on mobile view.. its too big.. my URL is www.milasgardenglamping.com .. i sent the above message a few weeks ago".. but didnt realise you responded 🙂  "Im having the same issues, im version 7.1 and my button on mobile view which has CSS in now on my header (was in burger menu before).. bit its quite far to the left and needs moving in (I've reduced logo padding, so there is space). However I think overall I need just code to reduce button and text size..cant seem to find a code that does.. please help

On 4/21/2022 at 10:32 PM, saradicarlo1 said:

Help, i am having issues !! The same thing with my button on mobile view.. its too big.. my URL is www.milasgardenglamping.com .. i sent the above message a few weeks ago".. but didnt realise you responded 🙂  "Im having the same issues, im version 7.1 and my button on mobile view which has CSS in now on my header (was in burger menu before).. bit its quite far to the left and needs moving in (I've reduced logo padding, so there is space). However I think overall I need just code to reduce button and text size..cant seem to find a code that does.. please help

It looks like you solved with this?

@media screen and (max-width: 992px) {
    .header-actions-action--cta a {
        border-radius:5px;
        padding: .8em .8em !important
    }

    .header-actions {
        display: block !important
    }

    .header .header-actions-action--cta {
        display: block;
        width: 0% !important;
        padding-right: 0px;
        padding-left: 0px
    }

    .header-title-nav-wrapper {
        flex: 100% !important;
        padding-right: 0px;
        padding-left: 0px
    }
}

Can anyone tell me the class for a form block button? I would like to resize it in mobile. Thanks!

On 11/11/2022 at 2:20 AM, laurensmithart said:

Can anyone tell me the class for a form block button? I would like to resize it in mobile. Thanks!

It is

Quote

.form-block input