Custom header looks different on mobile - How to fix?

Topic summary

A user is experiencing two design issues with their Dawn theme store:

Primary Issue - Mobile Display Inconsistency:

  • Custom pattern backgrounds applied to header, utility bar, and footer appear correctly in desktop mobile preview
  • However, these same elements render poorly on actual mobile devices
  • Seeking solution to achieve consistent appearance across preview and real mobile devices

Secondary Issue - Element Alignment:

  • Wants utility bar and header to be flush/seamlessly connected
  • Ideally would merge them using a single continuous pattern image for visual cohesion

Additional Context:

  • Store password provided: teefai
  • Multiple screenshots attached showing the discrepancies
  • Thread remains open with no responses or solutions yet provided
Summarized with AI on November 3. AI used: claude-sonnet-4-5-20250929.

Hey guys - so I have two problems…

The first is that I am using a custom pattern for my header, utility bar, and footer background. For some reason, they look absolutely terrible on my actual mobile and nothing like they do on the “mobile view” on the website, is there any way of making these look the same?

The second problem is I wanted the utility bar and the header to be flush (or even somehow just moulded together and use the same image to make the pattern flush) is there a way I can fix both of these problems?

I am using the Dawn theme

Here is my store: https://manningtree-vintage-vibes.myshopify.com/
The password is: teefai

Thank you in advance!

1 Like