Left-Align Home Header Text

Store Design

Topic summary

A user is attempting to left-align header text and a button on their home page banner image in a Dawn theme store.

Initial Challenge:

  • The user struggled to share their store link properly, initially posting password-protected URLs instead of the preview link.
  • After guidance on generating the correct preview link (Theme > Preview > Copy URL), they successfully shared access.

Proposed Solution:
A community member provided CSS code to add to the theme’s stylesheet (base.css, style.css, or theme.css):

  • Target .banner__content with justify-content: left and margin-left: 0 within a media query for screens min-width 750px.

Current Status:

  • The CSS partially worked but only aligned content “slightly left of center” rather than fully left.
  • The issue remains unresolved, with the user sharing a screenshot showing the incomplete alignment.
  • Further troubleshooting or CSS adjustments are likely needed to achieve full left alignment.
Summarized with AI on November 5. AI used: claude-sonnet-4-5-20250929.
1

Hello!

I am just getting started here - I am curious how to left-align the header text and the button on the banner image on my home page. Thank you!

I am not sure if this link will work for my store: https://wwgearexchange.myshopify.com/?_ab=0&_fd=0&_sc=1

passingthrough_0-1728998899097.png
passingthrough_0-1728998899097.png1660Ă—856 351 KB

1 Like
2

Hello @passingthrough

Your site is password protected.

3

Hi @passingthrough

Password protected.

4

It’s a dev site through a third party so I am not sure I can share a link?

5

You can share the preview link,

Select theme > preview > copy and paste the url.

Made4uoRibe_0-1729000376696.png

6

That’s what I did in the OP. Let’s try again!
https://wwgearexchange.myshopify.com/?_ab=0&_bt=eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaEpJaUYzZDJkbFlYSmxlR05vWVc1blpTNXRlWE5vYjNCcFpua3VZMjl0QmpvR1JWUT0iLCJleHAiOiIyMDI0LTEwLTE1VDEzOjU3OjU3LjM1MFoiLCJwdXIiOiJwZXJtYW5lbnRfcGFzc3dvcmRfYnlwYXNzIn19–4139db3c70b36db5f8f6fe0076e2b352579de55a&_fd=0&_sc=1

7

This is still the password page, the link look like this.

Made4uoRibe_0-1729001049941.png

8

Got it, thank you for your patience: https://lsmigszrso5tustp-67287220324.shopifypreview.com

9

oh, still password protected. Did you check on the prefences if you can see the password? if this is dawn theme we can provide some code from the themes. But as you said its 3rd party theme.

10

It is Dawn theme! I should have mentioned that…

11

TRy this one if it work,

  1. From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  2. Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  3. 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 screen and (min-width: 750px) {
    .banner__content {
        justify-content: left;
        margin-left: 0;
    }
}

Your Feedback Matters! Please mark the solution and give likes to posts that helped you. Your appreciation fuels our motivation to assist you better!

12

It aligned just slightly left of center…

https://lsmigszrso5tustp-67287220324.shopifypreview.com

passingthrough_0-1729008127145.png
passingthrough_0-1729008127145.png1474Ă—770 285 KB