CSS Responsive Circles
# March 12, 2013 at 10:07 pm
I have been trying to figure out the structure for some css created circles within a grid system. I want them to be 100% width so they scale. Just not sure on the div structure+with css
You see it often on designers sites, circles with icons in them. Like here: http://hungr.ee/ Those are images but you get my meaning.
Here is a codepen with my horrible attempt: http://codepen.io/anon/pen/EcpuF
Any help would be great. Always appreciate the help I get here!# March 13, 2013 at 4:11 am
> Here is a codepen with my horrible attempt: http://codepen.io/anon/pen/EcpuF
Your attempt isn’t bad at all, au contraire. You pretty much got everything; the problem is your container has different width and height, resulting in a rectangle, making your circle… an oval.# March 13, 2013 at 4:24 pm
@CrocoDillion Yes, it does work without the height and position. I had those in the code so that when he added his icon to the circle he would be able to center it by absolutely positioning the icon.
As for the idea; I cannot take credit for it. I discovered it here:# March 13, 2013 at 5:52 pm
Just a FYI, the new viewport based vw, vh and vmin units can easily give the same results. Of course you’d end up supporting only newer browsers as there is serious lack in mobile browser support: http://caniuse.com/#search=viewport
Hopefully quite usable by next year. Right now I came up with this example to show how one could use viewport units and give percentages for browsers that don’t support it: http://codepen.io/Merri/pen/gimKw
Also shows how you can get centered stuff without any position properties. I tried to comment the CSS to give an idea of all the minor details.# March 15, 2013 at 3:48 pm
>Brilliant technique @nordstromdesign (are the position and height really necessary? seems to work without it)…how did you come up with using padding-top like that?
If no mistake, the idea first came up in A List Apart by Thierry Koblentz to keep intrinsic ratio for responsive videos: http://alistapart.com/article/creating-intrinsic-ratios-for-video.
You must be logged in to reply to this topic.