0

hello friends i'm trying to make my website compatible with all screen size (resolution) i use media query @media only screen and (max-width:x;)
but it don't work change on diferent device on 7 inch tablet only half part of screen is shown and half go beleow on footer catastrophe on tablet... and on phone same problem, on largest screen resolution my website look very small.
here is my css code

@charset "utf-8";
@media only screen and (max-width:1366px) {
body {
    font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
    background-color: #F8F8F8;
    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: 1600px;
    background-color: #FFFFFF;
    margin-bottom: 0;
    padding-left: 5px;
    padding-right: 5px;
}
.sidebar1 {
    float: left;
    width:100%;
    max-width: 180px;
    background-color: #EADCAE;
    padding-bottom: 10px;
}
.content {
    float: left;
    width:100%;
    max-width: 840px;
    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;
}
}
@media only screen and (max-width:800px) {
body {
    font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
    background-color: #F8F8F8;
    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: 800px;
    background-color: #FFFFFF;
    margin-right: auto;
    margin-bottom: 0;
    margin-left: auto;
}
.sidebar1 {
    float: left;
    width:100%;
    max-width: 90px;
    background-color: #EADCAE;
    padding-bottom: 10px;
}
.content {
    float: left;
    width:100%;
    max-width: 420px;
    padding-top: 10px;
    padding-right: 0;
    padding-bottom: 10px;
    padding-left: 0;
}
.sidebar2 {
    float: left;
    width:100%;
    max-width: 90px;
    background-color: #EADCAE;
    padding: 10px 0;
}
}
2
Contributors
1
Reply
29
Views
3 Years
Discussion Span
Last Post by LastMitch
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.