Stack image banner text and button over image on mobile

Store Design
, ,

Topic summary

A user seeks help stacking image banner text and button over the image on mobile devices only for their Shopify store (discountotc.com).

Proposed Solution:

  • Add CSS code to base.css file via Online Store → Theme → Edit code → Assets
  • Use media query targeting max-width: 749px
  • Apply CSS order property to .banner__content and .banner__media elements

Current Status:

  • Initial CSS solution provided did not work
  • A second attempt was offered with !important flags added to the order properties
  • Discussion remains ongoing with no confirmed resolution yet

Note: The code snippets in the conversation appear corrupted/reversed, which may affect implementation.

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

How can I stack the image banner text and button over image on mobile only? Website discountotc.com

Screenshot 2023-08-09 at 11.45.21 AM.png
Screenshot 2023-08-09 at 11.45.21 AM.png938×944 114 KB

2

Hello @EZ7

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 screen and (max-width: 749px){
.banner--mobile-bottom:not(.banner--stacked) .banner__content {
    order: 1;
}
.banner__media {
    order: 2;
}
}
3

That did not work, unfortunately. Is there other code you can recommend?

4

Hello @EZ7

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 screen and (max-width: 749px){
.banner--mobile-bottom:not(.banner--stacked) .banner__content {
    order: 1 !important;
}
.banner__media {
    order: 2 !important;
}
}