Skip to Content (Press Enter)
2018-11-26 14-52-12
Manuel Migueles
433Views
3Comments
Solved
Responsive font
Question
Usability

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.

0
0
28 Nov 2018
Copy Link
2017-06-21 13-04-28
Mikko Nieminen
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/

See solution in context
4
0
29 Nov 2018
Copy Link
2018-11-26 14-52-12
Manuel Migueles

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.


1
0
29 Nov 2018
Copy Link
2020-09-15 13-07-23
Kilian Hekhuis
 
MVP

Hi Manuel,

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

1
0
28 Nov 2018
Copy Link
2017-06-21 13-04-28
Mikko Nieminen
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/

4
0
29 Nov 2018
Copy Link
2018-11-26 14-52-12
Manuel Migueles

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.


1
0
29 Nov 2018
Copy Link
Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.