1

What I need is the text to apear in its maximum size, withiut wrapping or going outside of the screen. I've tried with @media and changing the font-size, but this got too complicated! What I am trying to achieve is, making the faces at example.com appear at their maximum font-size even on mobile devices. The idea here is to not use media queries...

Thry the snippet to view iframe 

iframe {
  width: 100%;
  height: 100vh;
  border: none;
}
<iframe src="https://www.example.com/404.shtml">Your browser doesn't support iframes</iframe>
undefined
  • 1,019
  • 12
  • 24

1 Answers1

2

my initial though would be to use the vw property for the font-size. I have created this fiddle to demonstrate how it works. Resize the render screen to see how the font shrinks as the window gets smaller and grows and it gets bigger. You can use media queries to determine the max font size.

For the no-wrapping just add white-space: nowrap; in your css.

Matthew
  • 922
  • 1
  • 6
  • 21
  • 1
    3 words: You are awesome! This is really working! For the viewer thingies I knew only vh - for height. Thanks so much! – undefined Jan 23 '17 at 17:20