Member Avatar for chrisschristou

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
  • 173 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by Member #949455
Member Avatar for Member #949455

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 ????

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.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.