Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <h2>Pure CSS requiring many extra wrappers</h2> <p>UPDATED: Original posting (which I deleted) missed the fact that you were seeking a responsive design. <a href="https://stackoverflow.com/questions/12945891/responsive-css-circles/13018712#13018712">Building upon my answer for the responsive circles question you reference</a> seems to work in all CSS3 browsers, <a href="http://jsfiddle.net/WTWrB/58/" rel="nofollow noreferrer"><strong>see fiddle</strong></a>.</p> <p><strong>HTML</strong> (requiring five levels of wrapper, I only show one circle in this html)</p> <pre><code>&lt;div class="circles"&gt; &lt;div&gt; &lt;div&gt; &lt;div&gt; &lt;div&gt; &lt;!-- BEG Content --&gt; All types of content (see fiddle) &lt;!-- END Content --&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;!-- ditto the above 3 more times --&gt; &lt;/div&gt; </code></pre> <p><strong>CSS</strong></p> <pre><code>.circles{ margin:0px auto; } .circles &gt; div { overflow:hidden; float:left; width:auto; height:auto; position: relative; border-radius:50%; -moz-border-radius:50%; -webkit-border-radius:50%; -khtml-border-radius: 50%; background:#eee; } .circles &gt; div &gt; div { position: absolute; top: 0; right: 0; bottom: 0; left: 0; } .circles &gt; div &gt; div &gt; div { display: table; width: 100%; height: 100%; } .circles &gt; div &gt; div &gt; div &gt; div { display: table-cell; text-align: center; vertical-align: middle; } @media (max-width: 320px) { .circles &gt; div {padding: 50%;} } @media (min-width: 321px) and (max-width: 800px) { .circles &gt; div {padding: 25%;} } @media (min-width: 801px) { .circles{width:800px} .circles &gt; div {padding: 12.5%;} } </code></pre>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    3. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload