Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

How to change width and height depending on resolutions

How to change width and height depending on resolutions

Problem

I'm trying to make an adaptable Web page where I have some circles on it. The thing is: depending on which Screen size I use, the circles look like eggs or like circles, depending on the screen you see at it. I've solved that problem, and it is because I work with % width and height, so when you go to a squared or a rectangle screen, it changes the view.

So I decided to use fixed sizes, so it works the same way with all screen sizes. But, of course, when you go to different screen resolutions, this circles look bigger or smaller. I tried to put this:

@media screen (min-width: 1620px)
{
    html
    {
        font-size: 100%;
    }
.circle-wrap 
{ 
    width:150px; 
    height:150px;   
    position:absolute; 
    float:left; 
    text-decoration:none; 

    /* Multiple compatibility with border radius */
    /* CSS 3 */
    border-radius: 50%;
    /* Firefox versiones 3.x */
    -moz-border-radius: 50%;
    /* Safari desde 3.2 hasta la 4 */
    -webkit-border-radius: 50%;
    /* Khtml Conqueror */
    -khtml-border-radius: 50%;
}
}

So with that, what I'm trying to do is create a class circle-wrap to adjust my pixel size due to different screen resolutions. But it doesn't work as expected. I suppose for some reason you can't put on the @media ... your own classes or identifiers, so I'm trying to find a solution on how to change dinamically my pixel width/height for my circles due to different resolutions.

Any help would be really appreciated!

Problem courtesy of: Sonhja

Solution

First option you can use dynamic size units http://www.w3.org/TR/css3-values/#lengths

Or apply media queries

.circle-wrap { 
    position:absolute; 
    float:left; 
    text-decoration:none; 

    /* Multiple compatibility with border radius */
    /* CSS 3 */
    border-radius: 50%;
    /* Firefox versiones 3.x */
    -moz-border-radius: 50%;
    /* Safari desde 3.2 hasta la 4 */
    -webkit-border-radius: 50%;
    /* Khtml Conqueror */
    -khtml-border-radius: 50%;
}
@media screen and (min-width: 1620px) {
    .circle-wrap { 
        width:150px; 
        height:150px;
    }
}
@media screen and (max-width: 1620px) and (min-width: 1024px) {
    .circle-wrap { 
        width:125px; 
        height:125px;
    }
}
@media screen and (max-width: 1024px) {
    .circle-wrap { 
        width:100px; 
        height:100px;
    }
}
Solution courtesy of: Yoann

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

How to change width and height depending on resolutions

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×