Anyone know why this text doesn't wrap within the div?

I’m having trouble figuring out why the text shown below isn’t wrapping within the div it’s in (causing the div to expand vertically to display the text when it’s in mobile view). Right now, in mobile view, the text just runs off the right side of the container it’s in. I’d like it to wrap down so it’s all visible.

Here’s a screenshot:
44%20AM

Here’s my read-only link:
https://preview.webflow.com/preview/tacmil-lightspeed-defense?utm_source=tacmil-lightspeed-defense&preview=81eaf16a234e5bfba25de5f9ac6bbabc&mode=preview

Thanks!
Jason


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

Hello MI Jason,

If you want your text to wrap down you have to add a break line. At the end of your text that you want to go down to a second line hold alt and press enter. That should give you a new line for your container. I hope this works.

Thanks Pablo. I was hoping to only have the text break when the div is smaller in the mobile view. This way the text would all be on one line for all other (wider) views but then wrap/break on the mobile view. Is that possible?

1 Like

@MIJason,

I see the problem with the break line on the other displays. The way I would fix it so it only affects mobile, is by selecting all the dropdowntoggle elements on mobile and display none, so it is not visible on mobile. Then I would create them again for mobile with the break line on them and with display none on the tablet and desktop displays. I know is kind of a long way to fix something that looks much simpler, but if you copy and paste the element it is not that time consuming. I hope this helps.

Yeah, that’s my last resort. I’d hoped that someone could illuminate me on why the div isn’t simply expanding and the text element wrapping but if I have to I’ll do a separate version just for mobile. Thanks for helping!

Yeah man I hear you. I hope you can find the solution you are looking for.

@MIJason -> You should be able to add this custom CSS; .dropdowntoggle {white-space: normal;} to resolve the issue.

1 Like