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

Solved

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

Ivyanddaisy
Visitor
3 0 1

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

Accepted Solution (1)

Dan-From-Ryviu
Shopify Partner
8572 1690 1701

This is an 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;
}
}

Screenshot_6.jpg

- Helpful? Like and Accept solution!
- Ryviu - Reviews & QA app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

View solution in original post

Replies 4 (4)

Filar_co
Shopify Partner
6 0 0

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!

– Is it helpful? Please Like or Accept solution
Buy me a coffee

Dan-From-Ryviu
Shopify Partner
8572 1690 1701

This is an 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;
}
}

Screenshot_6.jpg

- Helpful? Like and Accept solution!
- Ryviu - Reviews & QA app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

Ivyanddaisy
Visitor
3 0 1

Perfect solution, thank you soooo much!!

Dan-From-Ryviu
Shopify Partner
8572 1690 1701

You are very welcome, @Ivyanddaisy 

- Helpful? Like and Accept solution!
- Ryviu - Reviews & QA app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.