Question

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!

Answer 1

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;
    }
}