Responsive CSS circles that:
If solution is javascript, I still need to emulate media query triggers. I dont 'need' media queries but I do want the ability to control the radius by percentage at certain widths:
@media (max-width : 320px)
{
.x2{padding: 50%;}
}
@media (min-width : 321px) and (max-width : 800px)
{
.x2{padding: 25%;}
}
@media (min-width: 801px)
{
.x2{padding: 12.5%;}
}
Here is what I have so far:
<div class="x1">
<div class="x2">
lol dude
</div>
<div class="x2"></div>
<div class="x2"></div>
<div class="x2"></div>
</div>
.x1
{
float:left;
width:100%;
}
.x2
{
display:block;
float:left;
padding: 12.5%; //Currently being used to control radius.
width:auto;
height:auto;
border-radius:50%;
-moz-border-radius:50%;
-webkit-border-radius:50%;
-khtml-border-radius: 50%;
background:#eee;
text-align:center;
}
In this solution, when content is added to a circle:
I've built a working solution for this here: Responsive CSS Circles
You don't need @media
queries for this. This is my try, pure CSS:
.x1 {
overflow:hidden;
}
.x1 .x2 {
display:block;
float:left;
padding: 12.5%;
width:auto;
height:auto;
border-radius:50%;
-moz-border-radius:50%;
-webkit-border-radius:50%;
-khtml-border-radius: 50%;
background:#eee;
text-align:center;
position: relative;
}
.x1 .x2 span {
position: absolute;
width: 100%;
left: 0;
top: 48%;
line-height: 1em;
height: 1em;
font-size: 100%;
overflow: hidden;
}