Page 1 of 1
How do I make a circle with CSS... on mobile?
Posted: Fri Feb 26, 2016 11:20 am
by simonmlewis
Code: Select all
background-color: rgba(170, 215, 0, 0.85);
border-radius: 50%;
width: 250px;
height: 250px;
This is the basic CSS code to make a 250px round disc.
But what if I want it to be roughly 80% the width of a phone handset? I cannot set a size, because I Want it to be 80% of a larger phone and smaller phone. So how do you set the circle to be a perfect circle... and respond to screensize?
Re: How do I make a circle with CSS... on mobile?
Posted: Fri Feb 26, 2016 2:10 pm
by Christopher
This works in modern browsers:
Code: Select all
<style>
.circle_container {
width: 150px;
height: 150px;
}
.circle {
background-color: rgba(170, 215, 0, 0.85);
border-radius: 50%;
width: 100%;
height: 100%;
}
</style>
<div class="circle_container">
<div class="circle">
circle
</div>
</div>
Re: How do I make a circle with CSS... on mobile?
Posted: Fri Feb 26, 2016 2:20 pm
by simonmlewis
So what if the browser window is 500px wide? OR if the window is 400px wide... or 600px wide?
I want it it to stretch - not be fixed.