Make buy now button smaller and remove large gap (mobile view)

Store Design
, , , , ,
1

There is a big space of black between the slide and the image with text below it, plus the buy now button is a bit large. How do I fix these two parts? I am on refresh theme

store - permacurl.shop

here is what it looks like now

Screen Shot 2023-06-13 at 1.24.54 AM.png
Screen Shot 2023-06-13 at 1.24.54 AM.png832Ă—1204 129 KB

1 Like
2

Hi @austin89s

I hope you are doing good and welcome to the Shopify Community!
I am San from MS Web Designer.

Please add this css in your bottom of the base.css file:

@media screen and (max-width: 749px){

.slideshow__text.banner__box a.button {font-size: 14px !important; padding: 0 20px !important; min-width: inherit !important;}

.banner–mobile-bottom .slideshow__text.banner__box {display: none !important;}

}

3

Hello @austin89s

You can try this code: it will be helpful to you

Go to the Online Store->Theme->Edit code->Assets->base.css>Add this code at the bottom.

@media (max-width: 767px){
.slideshow__text.banner__box a.button {
    min-height: 45px !important;
}
.banner__buttons {
   margin-top: -308px !important;
   margin-left: 0px !important;
}
.slideshow__text-wrapper.banner__content.banner__content--bottom-left.page-width.banner--desktop-transparent {
    display: none;
}
}
4

Hello There,

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find Asset > base.css and paste this at the bottom of the file:
@media (max-width: 767px){
.slideshow__text.banner__box {
    padding: 0!important;
}
.banner__buttons {
    padding-top: 47px;
    padding-left: 63px;
}
}

ZestardTech_0-1686639959714.png
ZestardTech_0-1686639959714.png1661Ă—697 136 KB

5

thank you, but now my buy now button is missing

6

my buy now button is missing now, can you help with that? The issue was fixed but for some reason buy now vanished.

7

Hi @austin89s

I see you use another css, if you use any previous css code then you should remove that code and add our css code.

8

Hello @austin89s ,

We see you have already fixed the padding or margin issue prevalent with your store. However, in the future, if you face such issues, you can get it resolved with a custom code.

We are sharing the steps for your help.

  1. Go to theme editor, and look for the “theme.scss.liquid” file in the “Assets” folder. Then, click on it to open the file.
  2. Scroll down the code until you find a section that contains CSS code related to the hero image slide or the image with text below it. It might have a class name like .hero or .hero-section.
  3. Look for a property called margin or padding within that section. Adjust the values of margin or padding to reduce the space between the two elements. For example, you can reduce the space by decreasing the top or bottom margin/padding values.

Now to adjust the size of the “Buy Now” button; you can follow these steps:

  1. In the theme editor, navigate to the “Sections” folder and open the “product-template.liquid” file.
  2. Look for the code for the “Buy Now” button. It may be labeled with a class like .product-form__cart-submit or something similar.
  3. Within that section, locate the CSS properties related to the button’s size, such as width or height.
  4. Now Save the changes.

We recommend taking help from a Shopify developer or expert agency who can help you fix this.

Hope your issue gets resolved. Let us know if you need more help with Shopify.

Regards,

CedCommerce

9

Hello @austin89s

You can try this code: it will be helpful to you

Go to the Online Store->Theme->Edit code->Assets->base.css>Add this code at the bottom.

@media (max-width: 767px){
.banner__buttons {
    top: 0px !important;
    bottom: 65px !important;
    left: 45px !important;
}
.slideshow__text.banner__box a.button {
    min-height: 38px !important;
}
.slideshow__text.banner__box a.button {
    padding: 0px !important;
}
}