PHP Developers Network

A community of PHP developers offering assistance, advice, discussion, and friendship.
 
Loading
It is currently Mon May 21, 2018 9:18 pm

All times are UTC - 5 hours




Post new topic Reply to topic  [ 3 posts ] 
Author Message
PostPosted: Fri Feb 26, 2016 12:20 pm 
Offline
DevNet Master

Joined: Wed Oct 08, 2008 3:39 pm
Posts: 4416
Location: United Kingdom
Syntax: [ Download ] [ Hide ]
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.


Top
 Profile  
 
PostPosted: Fri Feb 26, 2016 3:10 pm 
Offline
Site Administrator
User avatar

Joined: Wed Aug 25, 2004 7:54 pm
Posts: 13555
Location: New York, NY, US
This works in modern browsers:
Syntax: [ Download ] [ Hide ]
<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)


Top
 Profile  
 
PostPosted: Fri Feb 26, 2016 3:20 pm 
Offline
DevNet Master

Joined: Wed Oct 08, 2008 3:39 pm
Posts: 4416
Location: United Kingdom
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.


Top
 Profile  
 
Display posts from previous:  Sort by  
Post new topic Reply to topic  [ 3 posts ] 

All times are UTC - 5 hours


Who is online

Users browsing this forum: No registered users and 1 guest


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Jump to:  
Powered by phpBB® Forum Software © phpBB Group