How to Move Shop now button to the bottom of my image on mobile

Technical Q&A
1

Hello,

I am struggling to move the shop now button to the bottom of my hero photo on mobile. I want it to sit underneath the text in the centre so it doesn’t block any of the content and so users don’t need to scroll down to click on a product. I have circled in the screen shot below where I would like it to sit.

My website is https://brewbarncoffee.com/

Thank you for your help.

N4th4nsgt_0-1749546995771.png
N4th4nsgt_0-1749546995771.png1909×891 183 KB

2

Hello @N4th4nsgt
Go to online store ----> themes ----> actions ----> edit code ----> base.css
add this code at the end of the file and save.

@media screen and (max-width: 768px) {
.button.button--primary {
  top: 11rem !important;
}
}

result

37.png
37.png349×522 73.7 KB

If this was helpful, hit the like button and accept the solution.
Thanks

3

wo_3-1749549487380.png
wo_3-1749549487380.png538×309 16.2 KB

find section-image-banner.css，search ‘.banner__content’, change ‘align-items: center’ to ‘align-items: end’.

wo_0-1749549349737.png
wo_0-1749549349737.png444×208 2.98 KB

search ‘.banner__box’, change ‘padding: 4rem 1.5rem;’ to ‘padding: 1rem 1.5rem;’

wo_1-1749549431720.png
wo_1-1749549431720.png375×222 3.05 KB

wo_2-1749549455579.png
wo_2-1749549455579.png384×489 67.8 KB

4

Hey @N4th4nsgt

Follow these Steps:

  1. Go to Online Store

  2. Edit Code

  3. Find password.liquid file

  4. Add the following code in the bottom of the file above tag

RESULT

Moeed_0-1749549877367.png
Moeed_0-1749549877367.png351×752 103 KB

If I managed to solve your problem then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed