Header Text Alignment

Shopify Discussion

Topic summary

Goal: make the Brands page header align directly under the store logo, matching the About Us page.

Initial fix: helper advised adding CSS in theme.liquid before targeting the section “#shopify-section-template–17529873072291__main .page-width.page-width–narrow” to set text-align: left and margin: 0 62px.

Desktop-only request: user asked not to affect mobile; helper wrapped the CSS in a media query (@media screen and (min-width: 990px), a CSS condition that applies styles only on wider viewports).

Result: desktop alignment works at 100% browser zoom.

Ongoing issue: when zooming out to 80%, the header shifts, and the user asked for a fix to keep alignment consistent across zoom levels/responsive changes.

Status: pending further guidance; no solution yet for zoom/responsiveness. Screenshots were provided to illustrate alignment differences.

Summarized with AI on December 20. AI used: gpt-5.
1

Hello,

I need some help to align the header text on this page.

I’ve successfully aligned the headers for other pages with the same code but somehow, it doesn’t work for this particular page.

The header should align right below the store logo like this page: https://ee15bf-83.myshopify.com/pages/about-us

Page that requires help: https://ee15bf-83.myshopify.com/pages/brands

thatshampooshop_0-1725163781039.png
thatshampooshop_0-1725163781039.png1452×756 116 KB

thatshampooshop_1-1725163792520.png
thatshampooshop_1-1725163792520.png1385×493 37 KB

Please advice.

Thanks!

2

Hello @thatshampooshop

You can add code by following these steps

  1. Go to Online Store → Theme → Edit code.

  2. Open your theme.liquid file

  3. Paste the below code before on theme.liquid

#shopify-section-template--17529873072291__main .page-width.page-width--narrow { text-align: left !important; margin: 0 62px !important; }

niraj_patel_0-1725164715783.png
niraj_patel_0-1725164715783.png1336×618 186 KB

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

3

Hey Niraj,

Thanks for your help. But I only want to make the change on desktop and not affect the mobile view.

Are you able to assist?

4

Hello @thatshampooshop

Replace code with this code:

You can add code by following these steps

  1. Go to Online Store → Theme → Edit code.

  2. Open your theme.liquid file

  3. Paste the below code before on theme.liquid

@media screen and (min-width:990px){ #shopify-section-template--17529873072291__main .page-width.page-width--narrow { text-align: left !important; margin: 0 62px !important; } }

niraj_patel_0-1725166814178.png
niraj_patel_0-1725166814178.png400×185 33.6 KB

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

5

Hey Niraj,

Thanks! It works but is it possible to fix the header alignment if i zoom in and out of the page?

For example, if my page is 100%, it is aligned. But if I zoom out to 80%, it shifts.

Thanks