Wrapping Text On Hero Banner

Store Design
, , ,

Topic summary

A user seeks to reformat hero banner text on their homepage from multiple lines to two lines. An image shows the current multi-line layout.

Solutions Proposed:

  • TimotSbur suggests CSS modifications using .hero__heading with properties like white-space: nowrap and max-width, noting Shopify 2.0 themes may offer direct heading adjustments.

  • CodingFifty provides targeted CSS code for base.css/theme.css files, using media queries to adjust .caption-content max-width for desktop views (min-width: 769px).

  • Moeed offers code to add in theme.liquid above the </body> tag, includes a result screenshot showing the reformatted banner.

  • LizHoang recommends adding CSS to base.css targeting .full-width--true .caption for screens 768px and wider.

Resolution:

The user notes their Turbo theme lacks a base.css file, requesting theme-specific guidance. Moeed’s solution successfully resolves the issue. The user confirms it works and asks about limiting changes to desktop only—Moeed clarifies the provided CSS already targets desktop exclusively via media queries, leaving mobile/tablet views unchanged.

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

Hello,

On my home page, in the hero section, I want to make the text wrap into two lines instead of how it is currently in multiple lines. How can I do that?

alexlomt1_0-1741107427447.png
alexlomt1_0-1741107427447.png1897×583 107 KB

1 Like
2

Hello,

You can modify the CSS for the heading in your theme. Try adding the following CSS to your theme’s stylesheet:

.hero__heading {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 80%;
font-size: clamp(24px, 5vw, 48px);
text-align: center;
}

If the text is too long, you may need to manually adjust the width using max-width or experiment with font-size to achieve the desired result. If you’re using a Shopify 2.0 theme, you can also check if your theme editor allows adjusting the heading size directly.

3

Hi @alexlomt1 ,

Thank you for reaching out to the Shopify community. I’d be glad to assist you. Could you kindly share your store URL and
password (if it’s password-protected) so I can review it and provide you with an update?

4

https://mmz7sv-mw.myshopify.com/

PW: seupri

5

HI @alexlomt1 ,

Go to Online Store, then Theme, and select Edit Code.
Search for base.css/theme.css/style.css/main.css/custom.css file Add the provided code at the end of the file.

@media only screen and (min-width: 769px){ 
section#banner-1489283389016 .caption-content {
    max-width: 89% !important;
}

section#banner-1489283389016 .position-center.caption.js-caption.caption--below-false {
    max-width: 100% !important;
}
}
6

Hey @alexlomt1

Follow these Steps:

  1. Go to Online Store

  2. Edit Code

  3. Find theme.liquid file

  4. Add the following code in the bottom of the file above tag

RESULT:

Moeed_0-1741114236003.png
Moeed_0-1741114236003.png1890×902 112 KB

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

7

Hi @alexlomt1

You can try to follow this step
Step 1: Go to Edit code
Step 2: Find file base.css and add this code at the end of the file

@media screen and (min-width: 768px) {
.full-width--true .caption {
    max-width: 1900px;
}
}

Best,
Liz

8

There is no base.css file in the Turbo theme. Can you please provide a solution for the Turbo theme specifically?

9

That worked perfectly, thank you. How can I ensure it only applies to desktop and mobile / tablet view stays exactly as it was so far?

1 Like
10

The CSS code which I provided you will only work for desktop only so there’s nothing to worry about.

Best Regards,

Moeed

1 Like