Make headers and entry headers responsive

Support
#1

Hi there,
I’m encountering some problems with button and entry header texts that overfow from the coloured background when displayed on mobile devices…
I don’t know where to start, there are so many options. I already did a lot of trial and error. None succesful.
There is custom css regarding the entry headers and buttons.

Where should I make alterations?

Regards,

Debora

#2

Hi @DeboraG,

Thanks for reaching out.

It happens because the word is longer than it’s container. I recommend changing it font size to smaller one, or change it’s font size to something like

calc(14px + 2vw);

You can do that to your headline and button’s font size option. Just change the 2vw unit, or 14px as based size.

Just play with the sizes until you get your desired size for each device.

Thanks!

#3

Thanks a lot! I played around till it worked fine on phone, tablet and desktop.

Did it the trial and error-way. Can you give me an explanation how px and vw relate to each other?

Regards,
Debora

#4

Hi Debora,

Whatever I do I can not explain the matter better than this brilliant article:

The article above gives an in-depth information regarding the combination of the base font pixel based on the calculation of the viewport units.

I also suggest that you read this and this article regarding the Viewport unites.

Also, I suggest that you read the answer of our lead developer to another customer regarding the case:

Finally, there is a fun online calculator that might help you guess the best combination:

http://emilolsson.com/tools/vw-unit-calc-an-online-responsive-css-font-size-calculator/

Thank you.

#5

Thanks a lot for the support. I’ll look into it.

Regards,

Debora

#6

You’re welcome!
We’re glad we were able to help you out.

#7

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