CODEWITHSUNDEEP
css
SebastianZdroana
SebastianZdroana

Reputation: 209

Problems with scaling text while zooming on browser

basically i have set up my html elements in css with percentages, if i zoom in the elements/boxes stay the same but the text just gets over inflated/gets too big and goes outside the box.

Is there any way to keep the text inside and give it like a max-font-size for zooming in to not allow the text to get too big.

https://gist.github.com/seby1995/751e3eddcd12f24aeb7a

https://gist.github.com/seby1995/faaaf4ee2696aa051737

https://gist.github.com/seby1995/01adf5234cb55cd14a65

Normal:

enter image description here

Zoomed in:

enter image description here

Upvotes: 0

Views: 472

Answers (1)

MilesStanfield
MilesStanfield

Reputation: 4639

you can use em instead of px if you want the fonts/elements to be proportional while resizing browser window

so do this ...

<div style="background:blue; width:5em; height:5em;">
  <span style="font-size: 1.7em; color:white;">foobar</span>
</div>

and in your browser resize with your keyboard cmd/ctrl + + or cmd/ctrl + - and you will see that foobar is exactly in the same place inside the box at any size (besides ridiculously minuscule)

Upvotes: 1

Related Questions