I am not a front end dev but I have inherited a web page that uses media queries and aspect ratio so the content of the page grows proportionally to the size of the viewport, in this case a browser window. The problem is there is a paragraph on the page that is justified (flush to the left and right), so at certain sizes, the spacing between words is not aesthetically pleasing to my client. My question is what is standard practice for this sort of thing? Could one display the content at fixed sizes depending on the size of the browser window using media queries and min-width/max-width min-height/max-height settings, like so:
if the viewport size is < x, render content at fixed size a
else if viewport size is < y, render content at fixed size b
else if viewport size is < z, render content at fixed size c
else render content at fixed size d
?
Or?
thank you all for your responses. i just, at least for now and after many hours of reading and trying various things, solved the problem by simply changing one of the font-size settings just slightly. from 2vw to 1.98vw. although end user is happy, i want / need to understand what i've done. looks like it's time to learn front end work.
@media all and (max-aspect-ratio: 100/68){
...
table#main td#mainLeft table#logoMoto{
width: 30vw;
height: 66vw;
font-family: Arial, Helvetica, sans-serif;
--> font-size: 1.98vw; // was font-size: 2vw;
vertical-align: top;
}
...
}