Member Avatar for chrisschristou

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
  • 349 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by LastMitch
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.