Responsive font

  

Greetings,

I have a text (using a normal Text Widget) that has a long word. When I visualize it in the resolution of modern devices it looks good (Iphone X, for example).

But when I see it in smaller devices (like Iphone 5, for example) the word is cut off.

Does anyone know if there is any way (or style) for a text (Text widget) to be responsive depending on the width of the device?


Thanks in advance for any help.

Hi Manuel,

That seems something that CSS styling can fix? Use a media query and set the appropriate font width.

Solution

Yes, CSS to solve all problems.

Example of media query Kilian mentioned would look like this:

@media only screen and (max-width: 600px) { 
  .class-for-text {
     font-size: 10px;
  }
}

In this case, you would apply CSS class "class-for-text" to your text widget. After this, that widget will have a font size of 10px in all devices where screen width is smaller than 600px.

Another thing to try / consider is to use different unit (%, em, rem) in your font size instead of pixels. Here's a page I refer for these: https://css-tricks.com/almanac/properties/f/font-size/

Solution

Mikko Nieminen wrote:

Yes, CSS to solve all problems.

Example of media query Kilian mentioned would look like this:

@media only screen and (max-width: 600px) { 
  .class-for-text {
     font-size: 10px;
  }
}

In this case, you would apply CSS class "class-for-text" to your text widget. After this, that widget will have a font size of 10px in all devices where screen width is smaller than 600px.

Another thing to try / consider is to use different unit (%, em, rem) in your font size instead of pixels. Here's a page I refer for these: https://css-tricks.com/almanac/properties/f/font-size/

Greeting Mikko,

Thanks for taking the time to answer.

Your solution works perfect for me.

Best regards.