I would like to move the text and button up on my home page in the Dawn theme -
Topic summary
Goal: move the homepage hero text and button higher in the Dawn theme.
Progress/Context:
- Achieved on desktop; mobile layout still misaligned relative to the background image.
- Store URL shared for reference.
Proposed fix shared:
- Edit theme code (Online Store > Themes > Edit code).
- In Assets > section-image-banner.css, add a rule for .banner__content.banner__content–top-center to set align-items: flex-start and justify-content: center.
- A screenshot was provided showing the desktop alignment result.
Latest update/Outstanding issue:
- A follow-up request asks to move only the button up on mobile so it appears fully within the “pool” area of the image.
- A mobile screenshot was attached to illustrate the desired positioning.
Status:
- No mobile-specific solution provided yet; discussion remains open.
What’s needed next:
- A mobile-only adjustment (likely via CSS targeting the button within a media query) to fine-tune vertical spacing on small screens.
Notes:
- Images and the live site link are central to understanding the layout issue.
1 Like
Hi @aubreyswims
Would you mind to share your store URL? Thanks!
I was able to move it for the desktop but on the mobile version the text and button are still not where I want them to be…
1 Like
Thanks for the info, check 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 “section-image-banner.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:
.banner__content.banner__content--top-center {
align-items: flex-start;
justify-content: center;
}
And Save.
Result:
Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!
1 Like
