Why is my homepage hero text getting cut off on desktop even though it looks fine on my screen?
If your homepage hero looks great on your own screen but clips or overlaps at other desktop widths, the cause is almost always a fixed-height container fighting with your heading's actual rendered size, and it's fixable without a developer in most cases.
What's going on
You publish a new homepage hero, it looks perfect on your laptop, and then a customer, or you on a different monitor, sees the headline sliced off at the bottom of the banner, overlapping the image, or running past the edge of the text box on desktop. It's a common enough complaint that it shows up regularly in merchant discussions as a first-impression problem: a visitor notices it in the first few seconds and quietly judges the whole site for it.
The frustrating part is that it often doesn't reproduce consistently. It might look fine at 1920px wide and broken at 1280px, or fine in the theme editor's preview but broken in an actual browser window that isn't maximized. That's because desktop isn't one fixed size, it spans everything from a 1024px laptop screen to a large ultrawide monitor, plus whatever browser zoom level a visitor happens to be using, and most hero or banner sections are built around a specific height and text-box size that doesn't scale perfectly across that whole range.
This is a layout and styling issue, not a content or marketing issue. The fix almost always lives in the theme editor's section settings, and occasionally in the theme's CSS, rather than requiring a completely different app or approach.
Why it happens
Many current Shopify theme sections, including Dawn and most Dawn-based themes, let you set a banner's height as a separate setting from the amount of text in the heading and subheading blocks, often with a choice between a fixed size and one that adapts to the image. That's intentional, so your layout doesn't jump around as content changes, but it also means a fixed height can end up too short once font size, line height, and content width combine, especially at the specific viewport width where the heading happens to wrap onto an extra line.
A second, less obvious cause is leftover or added custom CSS. If your theme's code has ever been edited, whether by a developer, an app, or a copied snippet, it's easy for a rule like a fixed pixel height, a hidden-overflow property, or a negative margin to end up on the hero container. That kind of rule clips content silently with no error message anywhere; it just looks like text getting cut off.
Finally, many merchants only ever preview their store on one device at one zoom level, so a hero that overflows at, say, 1280px or 110% browser zoom simply never gets seen before a customer reports it.
5 ways to fix it
Check the section's height and content-width settings in the theme editor first
Most current Shopify themes, including Dawn and its derivatives, let you set a banner or hero section's height separately from Small, Medium, Large, or a version that adapts to the image, plus a content width or position setting. If the height is locked to a small fixed option while your heading text is long or set to a large type size, the text can overflow that container. Open Online Store, then Themes, then Customize, click into the hero section, and try a taller or adaptive height option, then shorten the heading or reduce its font size until it fits comfortably on a standard desktop screen.
Test at several real desktop widths, not just your own monitor
Desktop screens range from roughly 1024px laptops up to large ultrawide monitors, and browser zoom level changes the effective width too, so the theme editor's own preview of your current window won't catch every case. Use the editor's device preview options and also resize your actual browser window, or use your browser's built-in responsive/device-toolbar mode, to check common widths like 1024px, 1280px, 1440px, and 1920px. A hero that looks perfect on your own screen can still clip on a smaller laptop or a browser that isn't maximized.
Look for custom CSS that sets a fixed height or hides overflow on the hero section
If a developer, an app, or a past edit added custom CSS to your theme's code, it's possible a rule sets a fixed pixel height, a negative margin, or hides overflowing content on the hero or banner container. That kind of rule will clip text regardless of what the theme editor's settings show, since it overrides them at the CSS level. Check your theme's code editor for custom stylesheets or edits to the section's class, and look for height, max-height, or overflow-related rules; loosening those, for example switching a fixed height to a minimum height, usually resolves clipping without redesigning the section.
Shorten the heading or reduce the text scale setting
Many hero and banner blocks include a text size or scale control for headings, and pushing that up for visual impact is a common cause of overflow once it's combined with a long line of copy. Long single-line taglines are especially prone to this, since text inside an image-style banner is positioned within a fixed box and doesn't reflow the way body text on a regular page does. Trimming the headline or dropping the scale by a step or two often fixes the clipping outright.
If your layout genuinely needs more flexibility, consider a purpose-built hero section
If the built-in banner's height and text controls can't reasonably fit what you're trying to show, for example a multi-line headline plus subtext plus two buttons, look at a different hero or rich-text section, either from your theme's additional section options or a small layout app, that's built with fluid sizing rather than a fixed-height box. This is a layout and design fix, not something a navigation or menu app would address, so make sure whatever you add is scoped to hero or banner layout specifically.
Bottom line
There's no single Shopify setting called "fix hero text" — this is almost always a mismatch between a fixed-height or overflow-hidden container and the actual rendered size of your heading at a given desktop width, and it's fixable in most cases without hiring a developer. Start with the free fix: adjust the section's height and content settings in the theme editor, shorten or resize the heading, then test at a few different desktop widths before assuming it's solved. If your hero design genuinely needs more layout flexibility than the section offers, that calls for a different hero section or a small design-focused app, not a general theme fix or an unrelated app like a navigation tool.
Browse the rest of the problem library, run a free storefront scan to catch issues like this automatically, or email us and we'll work out a custom solution for it.