Scale slide titles to not wrap on smaller screens

Ask the Community Customization
1

Hello! I just noticed my slide titles are wrapping when I scale my screen. Is there a way to prevent this and maybe have the text scale to stay within the line/container?

Screenshot 2026-06-22 at 3.43.15 PM
Screenshot 2026-06-22 at 3.43.15 PM1890×1034 474 KB

3

Hi there, @Lily_Gamble :waving_hand:

I’ve checked your widget and couldn’t replicate this behavior on my end. Does the issue occur when you use a browser zoom option?

image

Or did you mean changing the width of the browser window?

4

I appreciate you looking into it! It’s whenever I change the width of the desktop browser.

5

Thank you!

Please try to use this CSS code and let me know how it worked:

.eapp-slider-title-component {
  word-break: normal !important;
  overflow-wrap: normal !important;
  white-space: normal !important;
}
6

That doesn’t seem to have worked.

7

The code was added to the wrong place, but we’ve adjusted its placement. Please check it out and let me know if it helped :slightly_smiling_face:

8

Thank you for fixing that for me!

It worked by not wrapping the text, but do you know of any additional code I can add to prevent it from overlapping the media?

Screenshot 2026-06-23 at 9.04.42 AM
Screenshot 2026-06-23 at 9.04.42 AM1556×1172 452 KB

9

We’ve adjusted the position of the slide title using this code:

@media (min-width: 640px) {
  [aria-label="Slide 5"] .eapp-slider-title-component {
    margin-bottom: 100px;
  }
}

Please let me know how it worked :slightly_smiling_face:

10

I don’t believe that worked. It’s also an issue on the second slide (so if you figure it out, it can apply to both slides!).

11

Do you see this issue only on your website or in the widget configurator too? If the issue is reproduced on the website only, please send me a link to the page where your widget is installed.

Also please specify your device and its screen resolution :folded_hands:

12

If the placement of the top line of text is not critical, it seems like applying a margin-bottom or line-height would help. If the placement is critical, I would try using a different color text for that line with maybe 20% transparency - at least the overlap wouldn’t be black on black. Another option might be to apply CSS clamp sizing to the ‘Videography’ element, which would make the text appropriately sized for any screen size.

13

Here is the website I’m seeing the issue on: https://lilykgamble.com/. I’m currently working on a MacBook Pro 14"!

14

Thanks!

I’ve tried to increase the margin values for both slides and don’t see the issue anymore:

image
image329×382 17.8 KB

image
image1007×725 177 KB


Please check it out and let me know how it looks on your end now :slightly_smiling_face:

15

I’m not a fan of how that looks. I think I’ll play around with the layout options and see if that helps with how the elements interact with each other on different screen sizes. I appreciate all of your help!

16

Hi there, @Lily_Gamble :waving_hand:

I’ve reached out to you in a personal message. Please check it out :slightly_smiling_face: