Dynamic square inside a div and other content

Is there a way to make a responsive square inside a div?

I want the blue div to be square no matter what the parent div’s size is.

It’s hard to see a use case for this which makes it awkward to offer a solution.

At the moment you are setting the blue box to a fixed width so the only way it can be square is by giving it the same fixed height.

To make an aspect ratio box you can use a percentage width and then use the same padding-top in percentage and this will create a square box.

However as you have absolutely placed the blue box it will not affect the parents height. You would need to put the blue box back into the flow to affect the parents height.

If instead you wanted the height of the parent to affect the width of the blue box then I’m not sure that’s possible.

Perhaps if you explain the use case of this example and how you expect it to work with real content then we may be able to get closer to a solution :slight_smile:

3 Likes

If you are talking about tricks and not real applications then you can do this:

https://codepen.io/paulobrien/pen/zYxRxRg

(It works by having an arbitrary width large enough to cater for all occasions but the height is the height of the parent element. The transform rotates the element so that the height now becomes the width and the overflow hidden hides the extra height (previously width) so that you always get a square no matter the height of the parent.)

However for real world use its not much use unless you wanted to obscure your content.

There is a property in the pipeline that will create an aspect ratio but has no browser support yet.

https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratioFG

For other old aspect ratio methods including the padding method I mentioned see here.

1 Like

Ohhh, I’ll take a look at that.
I’m going to take a quick turn. Should I use viewport units for padding, font-sizes, basically for all the properties that has a numerical value with units?

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:

1 Like

Ohh, okay. Thanks! :smiley: