move mobile content down - image banner Dawn theme

Store Design
,

Topic summary

A user sought help moving mobile content below an image banner in Shopify’s Dawn theme, preferably using custom CSS that would persist through theme updates.

Solutions provided:

  • CSS approach: Add custom CSS targeting the banner box element with absolute positioning and bottom margin adjustments for screens under 749px width
  • Built-in option: Enable a theme setting to display content outside the image (shown via screenshot)

Outcome:

The issue was resolved successfully using one of the provided solutions.

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

Hi there,

How can I move this content to the bottom of the image on Dawn theme?

Preferably with a code to add in the editor, so it will stay the same after a theme version update.

Thanks!


Screenshot 2024-08-14 at 13.09.04.png

website

password kanex2024

2

Hello @INFRA ,

Add this css in theme settings custom css editor

@media screen and (max-width: 749px) {
.banner__box {
    position: absolute !important;
    bottom: 0 !important;
}
}

Thanks

1 Like
3

Hi @INFRA

Precheck this option to make it display out of image

Screenshot 2024-08-14 at 10.28.37.png
Screenshot 2024-08-14 at 10.28.37.png1632×717 98.6 KB

4

this worked, thanks so much!