Change "buy now" button position and size for mobile

Store Design
1

hello people,

ive been trying to fix this issure for a day looking at different discussions and nothing seems to help

as you can see on mobile, the button position is messed up

id love to change the size and position to match the desktop

IMG_1321.PNG
IMG_1321.PNG1170×2532 211 KB

on desktop, the position and size is fine

![1.png|1445x1194](upload://4bf9CO3CdVGMQqkNNZETlTGmjM5.jpeg)

any suggestions?

-----------------------------------------

webite: washedpod.com

pw: plp1234

2

Hi @ryanrooney4

You can try to solve it by adding this CSS code below in Online Store > Theme > Actions > Edit code > Assets > section-image-banner.css

.banner__buttons { margin-top: 200px !important; }
3

Hi @ryanrooney4 ,

Please paste below code in base.css at the very end of file.

@media(max-width:768px){
	.slideshow__text{line-height: 20px; padding: 0 20px; align-items: flex-start; margin-top: 115px;}
	.slideshow__text .button{padding: 10px 15px; line-height: 15px; min-height: auto; margin-left: 11px; min-width: auto;}
}
4

Hi @ryanrooney4

It’s PageFly - Page Builder App here, I hope you are doing well today!

I’ve checked your page but the issue is not fixed yet, so I wonder if the previous solution works for you. If it doesn’t, you can give this code a try:

  1. From Shopify dashboard, go to Online store > Themes > Edit code

  2. In the search box, search for the file named base.scss

  3. Scroll to the very end of this file, and paste this code:

a.button.button--primary {
   font-size: 1rem;
   padding: 1rem;
}

.slideshow__text.banner__box.content-container.content-container--full-width-mobile.color-background-2.gradient.slideshow__text--center.slideshow__text-mobile--center {
   padding: 0px; 
   margin-top: 100px;
   margin-bottom: 0px;
}
  1. Save the change and reload your store to check

Let me know if this work for you. Have a nice day ahead!

5

worked great, just had to play around with the margin top number. Thank you!