Dawn theme - Image banner text full width

Store Design

Topic summary

A user seeks to customize their Dawn theme’s image banner, specifically addressing two layout issues:

Primary Issue - Header Text Width:

  • Banner text currently wraps onto two lines instead of displaying full-width
  • AnneLuo provided CSS code to be added above the </head> tag in theme.liquid
  • Solution successfully resolved the text width problem
  • User added the code to the CSS editor for theme update compatibility

Secondary Issue - Logo Positioning:

  • User wants to reposition the logo and text further left on larger screens
  • Currently too centered on the banner image
  • AnneLuo provided updated code to address positioning
  • Follow-up request made to move the logo even further right for better alignment

Current Status:
The discussion remains active with ongoing refinements to the logo positioning. The main text width issue has been resolved, but fine-tuning of element placement continues.

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

Hi there! I have 2 questions:

  1. I would like my header text on the image banner to be full width so it’s not on 2 lines like below.

Screenshot 2024-10-08 at 13.26.55.png
Screenshot 2024-10-08 at 13.26.55.png2280×890 769 KB

Website

password: fbc

  1. Is it possible to have all the text on the image & the logo further on the left on a bigger size screen? It’s currently showing too much in the center:

Screenshot 2024-10-08 at 13.29.36.png
Screenshot 2024-10-08 at 13.29.36.png1901×850 576 KB

thanks so much!

2

Hi @INFRA

ok

3

You can try this code by following these steps:
Step 1: Go to the online store ->Theme ->Edit Code.
Step 2: Find the theme.liquid file and add the following code above the tag

Result:

AnneLuo_0-1728356356284.png
AnneLuo_0-1728356356284.png1374×649 1.01 MB

Hopefully it will help you. If yes then Please don’t forget hit Like and Mark it as solution!

4

Hi, @Dan-From-Ryviu I have not changed anything and it is still on 2 lines for me. Would you have the solution?

If not, are you please able to remove your message so it does not look like it’s been solved? thanks so much!

5

This worked, thank you! (I added it in the CSS in the editor so it rolls over if we do a theme update)

Can I add something to move the logo to the left for the larger screen too?

6

Update the code
7

hi @AnneLuo ! I placed it on the right side now, and was wondering if we can move it a bit more to the right even?

Screenshot 2024-10-09 at 13.29.10.png
Screenshot 2024-10-09 at 13.29.10.png1435×633 853 KB