how to change button position in mobile

Store Design
,

Topic summary

A user wants to reposition the “Shop Now” button on mobile to match its desktop placement on their Shopify store (saintalen.com).

Current Issue:

  • The button appears at the bottom of banner images on mobile
  • Desktop version shows the button positioned differently

Solution Provided:
A CSS fix was offered to align the mobile button position with desktop:

  • Add specific CSS code to the end of the base.css file
  • Path: Shopify Admin → Online Store → Theme → Edit code → base.css
  • The code targets banner content alignment using flexbox properties with a media query for screens up to 749px width

Status: Solution provided, awaiting implementation confirmation from the original poster.

Summarized with AI on November 3. AI used: claude-sonnet-4-5-20250929.
1

i want to change the shop now mobile button position to show like in the desktop button

url : saintalen.com

ai41_0-1733410779763.png
ai41_0-1733410779763.png341×628 221 KB

ai41_1-1733410857249.png
ai41_1-1733410857249.png1561×802 279 KB

2

@ai41 - you want to show the button at the bottom of the image?

3

not at the bottom , i want it to show exactly like in the desktop

4

@ai41 - on browser view it is like this,

suyash1_0-1733411987287.png
suyash1_0-1733411987287.png1366×768 261 KB

5

yeah i want it to be down ,

6

@ai41 please add this css to the very end of your base.css file and check,
Shopify Admin → Online Store ->Theme → Edit code → base.css

@media screen and (max-width:749px){
.banner__content{align-items: flex-end;}
}
1 Like