How do I make a circle with CSS... on mobile?

HTML, CSS and anything else that deals with client side capabilities.

Moderator: General Moderators

Post Reply
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

How do I make a circle with CSS... on mobile?

Post 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?
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
User avatar
Christopher
Site Administrator
Posts: 13596
Joined: Wed Aug 25, 2004 7:54 pm
Location: New York, NY, US

Re: How do I make a circle with CSS... on mobile?

Post 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>
(#10850)
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Re: How do I make a circle with CSS... on mobile?

Post 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.
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
Post Reply