Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS CSS Responsive Circles

  • This topic is empty.
Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #43343
    wadem
    Member

    Hi All,

    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!

    #127998
    nordstromdesign
    Participant

    Use this code for the .circle class:

    .circle {
    position: relative;
    border-radius: 50%;
    width: 100%;
    height: auto;
    padding-top: 100%;
    background: white;
    }
    make sure your padding top is the same as your width and make your height auto.

    #128010
    Kitty Giraudel
    Participant

    > 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.

    #128047
    nordstromdesign
    Participant

    @HugoGiraudel that won’t work. He wants the circle to grow and shrink with the window size and for the circle to remain a circle.

    I believe this is what he is looking for:

    http://codepen.io/nordstromdesign/pen/sJlth

    #128048
    Paulie_D
    Member

    You can’t do that without javascript.

    Viewports aren’t square and percentages (such as have been used) are related to height and width of the viewport and nothing else.

    #128086
    CrocoDillon
    Participant

    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?

    #128096
    nordstromdesign
    Participant

    @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:

    http://www.td204.com/2012/08/31/responsive-circles-with-css3/

    #128098
    CrocoDillon
    Participant

    Still awesome, thanks :)

    #128111
    Merri
    Participant

    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.

    #128157
    wadem
    Member

    Amazing help as always! Thanks guys
    Thanks @nordstromdesign

    #128398
    Kitty Giraudel
    Participant

    >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.

    #132443
    vsjambois
    Member

    Hi all, I’ve been searching for a solution just like @norstromdesign posted. Thanks! Now I’m trying to center text on top of the circle and can’t get it lined up just right. Any help? Thanks in advance!

    #132446
    Paulie_D
    Member

    @vsjambois

    Perhaps you could start a new thread and show us what you have so far?

    #132460
    CrocoDillon
    Participant

    I took @nordstromdesign ‘s Pen and added the psuedo element trick to vertical align the content (from [Merri’s Pen](http://codepen.io/Merri/pen/cdgza) )

    Result: http://codepen.io/CrocoDillon/pen/trFam

Viewing 14 posts - 1 through 14 (of 14 total)
  • The forum ‘CSS’ is closed to new topics and replies.