mobile image banner cta button and heading placement

Store Design
, , , ,

Topic summary

A user needed help repositioning elements in a mobile image banner on their Shopify store (smoothervibes.com). Specifically, they wanted to move the CTA button to the bottom and the heading to the top of the image—only on mobile devices, not desktop.

Solution provided:

  • Add custom CSS to the section’s Custom CSS area
  • Uses a media query targeting screens under 750px width
  • Applies flexbox with flex-direction: column and justify-content: space-between to the .banner__box class
  • Sets height to 100% to enable proper spacing

Outcome:
The solution was confirmed successful by the original poster. Screenshots were shared showing the before state and the CSS implementation.

Summarized with AI on October 27. AI used: claude-sonnet-4-5-20250929.
1

Hi all,

please see screenshot, Is there a way to move the cta button to the bottom of image and the heading to the top of image please? Just on mobile, not desktop.

Website - https://smoothervibes.com/

Thank you

Untitled design (3).jpg
Untitled design (3).jpg804×929 40.5 KB

1 Like
2

Add this CSS to the Custom CSS area of that section:

@media screen and (width < 750px) {
  .banner__box {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
  }
}

002.PNG
002.PNG290×364 12 KB

001.PNG
001.PNG403×515 83.2 KB

1 Like
3

Legend, thank you

1 Like