I want to have less text with the mobile breakpoint in the headline. But when I erase it being on the mobile breakpoint it also disappears on the other breakpoints. how can i fix this?
Here is my site Read-Only: LINK
(how to share your site Read-Only link)
Technically page content doesn’t change. Element’s style is what we can change between breakpoints.
You can use overflow: hidden but that won’t give you a good result.
But if you really need to show different headline. Then I’d suggest you to place two different headline and in larger view show first and hide second one; and in smaller view show second one and hide first one.
Hi Abirana,
which are the issues using overflow: hidden (can it break the page?) and how do you adapt text to the mobile breakpoint?
Hi @e_hu, welcome to Webflow forum.
I mentioned overflow: hidden in context of, if you have pretty long big single word. If it will not fit the screen width, it will not be able to break the word. With overflow: hidden it will just hide the rest of the text. I guess I didn’t had to mention this actually 
So, if you’ve very long word then you should use overflow-wrap or word-break.
As much as I know, best way to adapt texts to smaller screen is to just to play with the font size. Font size on mobile shouldn’t be big. You’ll have to try and test your styles and see how it looks.
You can also use an approach to maintain your texts sizes for small screens, like below:
H6 - 16px
H5 - 18px
H4 - 20px
H3 - 24px
H2 - 28px
h1 - 32px
This is just an example, just trying to say you should stay close to the base font. You should most probably use 14px for base font size, but you’ve to check it with your font and style as well.