Font getting cut on mobile

Hi, I was doing a small landing page, but when I go to my iPhone, the “Y” of the word Party gets cut off. I have reviewed the margin and paddings but the problem keeps happening. Any suggestion? @sabanna any suggestion?


Here is my public share link: https://preview.webflow.com/preview/cumple-macu?preview=f579c6574d96246b260d35dfc4d5a576

Just lower your font size to 10 em when you are in the mobile viewport (Mobile View)

Every viewport can hold a font of different size and other settings - That’s why webflow is so cool!

I see your sectional work, while it is great - I think your implementation should be better.

You would need to drop in a section - set it to 100 VH and then add in your other DIV layers and style accordingly.

Although - Just reducing the size by 1 em should work.

I would overthink the way that the elements were defined on mobile screens overall. There are a lot of margins, paddings, line-heights in em, relative positioning AND flexboxing haveing a lot of elements overlap its regular boundaries… you could make it a lot easier with only using one technique. i d suggest only to use flexbox and keep in mind, that if your line-height is lower that the actual height/size of your font, it ll get out of its boundarie quickly - having a cut off effect of one or another parent element is set to overflow: hidden.

But i think you already solved it …

1 Like

Hi Daniel,

Thank you very much for the feedback. To be honest, I am not very proficient as a coder, I’m more a designer. If you would have the time to explain a bit further how should I implement this code, I would highly appreciate it. I played around for quite some time with flexbox but I just couldn’t get to accommodate the divs as I wanted. That’s why I had to use a lot of margins and paddings.

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.