Hello!
The titles on both Desktop and Mobile are breaking into separate lines. I’m using the Impact theme and wondering if there’s a way to prevent this by forcing a line break or increasing the size of the title container. I’d prefer not to reduce the font size unless it’s absolutely necessary.
Could anyone help me please?
Here’s a page of my website where it happens.
Hello!
The titles on both Desktop and Mobile are breaking into separate lines. I’m using the Impact theme and wondering if there’s a way to prevent this by forcing a line break or increasing the size of the title container. I’d prefer not to reduce the font size unless it’s absolutely necessary.
Could anyone help me please?
Here’s a page of my website where it happens.
.product__title,
.page-title,
.section-header__title {
white-space: nowrap; /* prevents auto line break */
overflow-wrap: normal;
}
@media (min-width: 750px) {
.product__title,
.page-title,
.section-header__title {
max-width: 100%; /* allow full width */
}
}
This keeps the whole title on one line unless the screen is too small, in which case it will naturally wrap.
Option 2 – Manual Line Break
If you want to control where the break happens, edit the title in your admin and insert an HTML break:
Nos ateliers cocktail et de mixologiesur Paris
This forces a new line exactly where you want it.
Option 3 – Increase Flexibility on Mobile
@media (max-width: 749px) {
.product__title,
.page-title {
font-size: clamp(18px, 4vw, 22px); /* scales nicely */
line-height: 1.2;
}
}
Thanks for your help! Which option/best practice would you recommend?
Hi EraLouis, glad it helped!
Best practice really depends on your goal:
If you want the title to always stay on one line (and you’re okay with it overflowing on smaller screens), then Option 1 (nowrap) is the simplest.
If you want control over where the break happens for readability, then Option 2 (manual <br>) gives you the most flexibility, especially for longer French titles.
If you want it to look good on both desktop and mobile without breaking design, then Option 3 (responsive font scaling) is usually the best balance — it prevents awkward wrapping while still being mobile-friendly.
Personally, for the Impact theme where typography is part of the design, I’d recommend Option 3. It keeps the titles elegant across devices, while still allowing natural wrapping if the text gets too long on very small screens.
