Need help with mobile type issue..easy fix?

[kbowman (Keith Bowman)]

Hello!
So I have an issue that I hope is an easy fix to an issue I can’t seem to solve. I changed the heading styles to ems and adjusted each header size for the various breakpoints (ie, h1 is 3em at desktop, 2.5 em at mobile). Everything looks and works great except on one page. I have a div block that is set to be 80% width at mobile and I have an image and some type within that div. For some reason the h1 header does not wrap within the div and overflows out of the div. I really do not know what can be causing this.

Does anyone have an answer? Help would be greatly appreciated!

Here is a screen shot of the designer view (or you can use the link), also here is a screenshot of how it looks on mobile:

---

Here is my public share link: LINK
(how to access public share link)

[coolest_vlad (Vlad Radchenko)]

This is the result of the text being too wide on the mobile screen (since all mobile devises have a different width), the solution to this is to decrease the size of the text on the mobile screen.

Hope this helps.

[kbowman (Keith Bowman)]

Thanks for the reply. I guess my question is why doesn’t the type break to another line? My type styles are based off a modular type scale,so I would rather to to find another solution than adjusting the type size if possible.

[coolest_vlad (Vlad Radchenko)]

The type does break, but you have a very long word and a large text size style applied to it, as a result, this is the behavior that is present.

[AntonioBalderas]

When using ems you can set font-size: 100% on the body and 85.5% on mobile

[kbowman (Keith Bowman)]

I did change the em of the H1 on mobile from 2.5 to 2.25 and that did fix the issue, but I guess what I trying to ask is why doesn’t the “r.” of the last word of the h1 drop to the line below it rather than break of out of its containing div? I am just trying to understand / learn from a functional standpoint. I thought that since it was within a div that had set padding that type would just flow to the next line, much like the body type works. Apparently that is not the case, so I am trying to understand what makes it different, if that makes sense.