Dynamic square inside a div and other content

I wouldn’t :slight_smile:

However it does depend on what you are doing. If you are making scale-able demos then for certain trick effects you can use all the above.

For headings font-size etc you can use vw units but you must use the min and max restrictions otherwise the text gets too big or too small. There are plenty of articles about based on viewport typography so just do a search. However a lot of people seem to think that you just scale everything up and down all the time and that’s not the case. Indeed on mobile you often want larger text for your main content than you would on a desktop. You also need larger target areas for links.

The best way is still via media queries and adjusting appropriately as you go.

You can of course tailor in some vw units but they are not always the best solution. As far as padding goes then I’m afraid I dislike percentage padding (or vw unit padding) as it never looks good and I would rather consistent padding in em or px but allow the content inside to grow. Otherwise on small screens you get no padding when as mentioned above you want more and on very large screens you get miles of useless padding.:slight_smile:

2 Likes