0

hello friend i need help. i created my site and i trying to make it compatible with all screen size (resolution) i use media query, what want is to know how to calculate the pixel smaller or larger i mean if my screen is 1200px and the div is 1000 px on screen with 600 i will give 500px for the div but on my site i have div class container and div class side bar 1 and side bar 2, and content what is the easy way to calculate the difference ????
here is my code and my normal css is laptop.

@media only screen 
/* Desktops and laptops ----------- */
@media only screen 
and (min-width : 1224px) {
/* Styles */
body {
    font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
    background-color: #F8F8F8;
    width: 100%;
    color: #000;
    margin-right: 0;
    margin-bottom: 0;
    margin-left: 0;
    margin-top: 15;
    padding-right: 0;
    padding-bottom: 0;
    padding-left: 0;
}
.container {
    width: 100%;
    max-width: 1550px;
    background-color: #FFFFFF;
    margin-bottom: 0;
    padding-left: 10px;
    padding-right: 10px;
}
.sidebar1 {
    float: left;
    width:100%;
    max-width: 180px;
    background-color: #EADCAE;
    padding-bottom: 10px;
}
.content {
    float: left;
    width:100%;
    max-width: 968px;
    padding-top: 10px;
    padding-right: 0;
    padding-bottom: 10px;
    padding-left: 0;
}
.sidebar2 {
    float: left;
    width:100%;
    max-width: 180px;
    background-color: #EADCAE;
    padding: 10px 0;
}
}
/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
    body {
    font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
    background-color: #000;
    color: #000;
    margin-right: 0;
    margin-bottom: 0;
    margin-left: 0;
    margin-top: 15;
    padding-right: 0;
    padding-bottom: 0;
    padding-left: 0;
}
.container {
    width: 100%;
    max-width: 758px;
    background-color: #FFFFFF;
    margin-right: auto;
    margin-bottom: 0;
    margin-left: auto;
}
.sidebar1 {
    float: left;
    width:100%;
    max-width: 70px;
    background-color: #EADCAE;
    padding-bottom: 10px;
}
.content {
    float: left;
    width:100%;
    max-width: 380px;
    padding-top: 10px;
    padding-right: 0;
    padding-bottom: 10px;
    padding-left: 0;
}
.sidebar2 {
    float: left;
    width:100%;
    max-width: 70px;
    background-color: #EADCAE;
    padding: 10px 0;
}
}
2
Contributors
1
Reply
15
Views
3 Years
Discussion Span
Last Post by LastMitch
0

hello friend i need help. i created my site and i trying to make it compatible with all screen size (resolution) i use media query, what want is to know how to calculate the pixel smaller or larger i mean if my screen is 1200px and the div is 1000 px on screen with 600 i will give 500px for the div but on my site i have div class container and div class side bar 1 and side bar 2, and content what is the easy way to calculate the difference ????

@chrisschristou

You know you haven't understand how this work yet?

This is the same code from this thread:

http://www.daniweb.com/web-development/web-design-html-and-css/threads/464734/html-css-fluid-

What is the issue you are having? I mean there is so much that any member can provided.

You really need to start from the basic to see how this works.

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.