Looking for resources on how to create circles using CSS? It can be a bit tricky, but here is the code you need:
HTML
<div id="wrapper">
<ul id="circles">
<li>
<div class="circle"><div>K</div></div>
<div id="column"><p>Some text here</p> </div>
</li>
<li>
<div class="circle"><div>T</div></div>
<div id="column"><p>Some text here</p></div>
</li>
<li>
<div class="circle"><div>R</div></div>
<div id="column"><p>Some text here</p></div>
</li>
<li>
<div class="circle"><div>F</div></div>
<div id="column"><p>Some text here</p></div>
</li>
</ul>
</div>
CSS
.circle {
width: 10em;
height: 0;
padding-bottom: 10em;
border-radius: 50em;
border: 0.1em solid white;
overflow: hidden;
background: transparent;
box-shadow: 0 0 3px gray;
}
.cirlce div {
float:left;
width:100%;
padding-top:50%;
line-height:1em;
margin-top:-0.5em;
text-align:center;
font-size: 7em;
font-family: 'Raleway', sans-serif;
color:white;
}
#column {
width: 13em;
}
#circles {
margin: 0;
padding: 0;
list-style: none;
}
#circles li {
float: left;
width:22.5% ;
margin:1.25% ;
}
#wrapper {
max-width: 60em;
margin: 0 auto;
padding: 0 5%;
}
I've customized this for desktop size, but when I switch to mobile, the circles overlap. How can I make them stack vertically under each other based on screen size? Any solutions?
Tried tables, but they distorted the circles into ellipses.
Thanks in advance!