dawn theme: change text position of banner mobile version

Store Design
, ,

Topic summary

A user seeks to reposition the title and “Shop all” button on their Dawn theme’s mobile banner, moving them toward the bottom of the image while keeping the desktop version unchanged.

Solutions Provided:

Two CSS approaches were offered:

  • Solution 1: Add align-items: flex-end !important; to .banner__content within a mobile media query (max-width: 749px)
  • Solution 2: Adjust padding on .banner__box container using padding-top: 260px and padding-bottom: 0 for screens under 767px

Both solutions involve editing the theme’s CSS file (base.css, style.css, or theme.css) through the Shopify admin code editor.

Follow-up Question:

Another user asked how to move text to the top of the banner instead. The response suggested using align-items: flex-start !important; with the same CSS structure.

Status: Multiple working solutions provided; implementation requires basic CSS file editing in Shopify theme code.

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

Hi, i want to change the position of the Title and the “Shop all” Button on the mobile Version (only on the mobile version the web version is good):

Like this:

byrdsvintage_0-1695997388035.png
byrdsvintage_0-1695997388035.png750×1410 124 KB

Heres the Link to the website - unfortunatly i dont know if this helps, because its for the webversion: https://mw3hpqj9i702j2eo-77703315800.shopifypreview.com

1 Like
2

Hi @byrdsvintage

Try this one.

  • From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  • Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  • In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
@media only screen and (max-width: 749px){
.banner__content {
    align-items: flex-end !important;
}
}
2 Likes
3

Hi @byrdsvintage

This is Henry from PageFly - Landing Page Builder App

You can try this code by following these steps:

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file base.css

Step 3: Paste the below code at bottom of the file → Save

@media (max-width: 767px){

.banner__box.content-container.content-container–full-width-mobile.color-inverse.gradient {

padding-bottom: 0 !important;

padding-top: 260px !important;

}}

Hope that my solution works for you.

Best regards,

Henry | PageFly

4

What code would you want to insert to get it to move to the top of the image banner instead of towards the bottom?

Thanks xx

5

Hi @taysip

Its flex-start. Try this one.

Same instruction;

@media only screen and (max-width: 749px){
.banner__content {
    align-items: flex-start !important;
}
}

And Save.

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

1 Like