Please help! How do I resize my shop now button?

[Ivyanddaisy]

Hello my site is:

ivyanddaisymerch.com

How do I resize the shop now button? I want it to be smaller and centered underneath the Ivy and Daisy text.

The current button obstructs the image when you look at the website on mobile.

thanks!!

[Filar_co]

Hi!

You need to change the css code in your theme or explicitly add css in your theme editor in Shopify Admin.

.button, .shopify-challenge__button, .customer button, button.shopify-payment-button__button--unbranded {
min-width: calc(12rem + var(--buttons-border-width) * 2);
min-height: calc(4.5rem + var(--buttons-border-width) * 2);
}

This is the code that is responsible for the size of the button. Tweaking the min-width and min-height values will change the size of it.

To get it centered and exactly under the logo is a difficult task due to responsiveness and the fact that the website layout will change with the screen width so that's something to remember. 

Have a good day!

[Dan-From-Ryviu · Accepted solution]

Hi @Ivyanddaisy 

Go to your Online store > Themes > Edit code > open base.css file and add this code below at the bottom 

@media only screen and (max-width: 749px) {
.banner--content-align-mobile-right .banner__box {
    text-align: center !important;
}
.banner .banner__content {
    align-items: end !important;
}
.banner .banner__content .button {
    min-width: 100px !important;
    min-height: 36px !important;
}
}

[Ivyanddaisy]

Perfect solution, thank you soooo much!!

[Dan-From-Ryviu]

You are very welcome, @Ivyanddaisy