Header main title overlay wrapper width

Shopify Discussion
,
1

For my header main title overlay on the hero image in homepage, I want the main title wrapper width to be increased so I can fit more characters in one line. I have Dawn version 12. How to do this?

2 Likes
2

Hi @CW5
Please share the link to your store

3

Hello, @CW5

1. Go to Online Store → Theme → Edit code.
2. Open your theme.css / base.css file and paste the code in the bottom of the file.

.banner__box {
  max-width: 80rem !important; 
}

The default is 50rem. Adjust this value as you see fit.

If you are using the Slideshow section instead of the Image Banner section on your homepage paste this code:

.banner__box,
.slideshow__text-box {
  max-width: 80rem !important; 
}

The default is 50rem. Adjust this value as you see fit.

Thank you!

1 Like
4

In Dawn 12, the main title on your homepage hero image is usually inside a wrapper that limits its width. You can increase it with a bit of CSS. Here’s a simple way:

.hero__heading-wrapper {
max-width: 90%; /* increase from default, e.g., 60% */
}

You can add this in Online Store > Themes > Customize > Theme Settings > Custom CSS (or in your base.css file). Adjust the max-width until your title fits nicely in one line.

That’s it! Your main title should now have more space to show longer text.

5

Hi @CW5

Welcome to the Shopify Community! Please share your store URL and password (if it’s password-protected), so I can check and provide you with the exact solution.

Best regards,
Devcoder :laptop:

6

@CW5 can you please share your website link?

7

Hi @CW5 ,
You can easily expand the width of the heading area by adding a small custom CSS snippet.

Step 1 - Go to Theme Editor

  1. Online Store → Themes
  2. Click Customize
  3. Open the Home page → Slideshow or Image banner section (whichever you are using)

Step 2 - Add Custom CSS

Inside the section settings, scroll to the bottom and click “Add custom CSS” (Dawn 12 supports per-section CSS).

Then paste this:

.banner__box {
  max-width: 800px !important;
}

If you’re using the Slideshow:

Use this instead:

.slideshow__text-wrapper {
  max-width: 800px !important;
}