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.