responsive media query

Question

chrisschristou 0 Posting Whiz

11 Years Ago

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

web-design

2 Contributors
1 Reply
162 Views
2 Days Discussion Span
Latest Post 11 Years Ago Latest Post by LastMitch

Reply to this topic

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.

LastMitch · Answer 1 · 2013-10-27T03:29:30+00:00

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.