CSS small screen issue

Question

My query was about my wordpress site womensfertility n hormones. c o m if I view the site on a smaller screen with resolution like 1024 x 768 the site would look like this:

but if I view it on my normal computer screen with big resolution it looks good, then if I scale it to iphone and ipad it would scale normal as it is responsive. I'm using optimizepress. I've just added a code to make the site boxed layout and to have a background image instead of full width. my code that I've added was:

.banner .logo img{width:200px}

.banner.centered-banner > .fixed-width .banner-logo {
       width: 100%;
}

.container {
   margin: auto;
   overflow: hidden;
   padding: 0;
   position: relative;
  width: 75%;
}

I guess the width: 75%; and the .banner .logo img { width: 200px; } makes the site looks that way, but I have no idea how to make the site look like boxed without doing that code. Any idea?

Answer 1

use CSS Media Queries

@media (max-width: 600px) {
  /*code for screen with max with 600px*/
}

@media (max-width: 480px) {
  /*code for screen with max with 480px*/
}

or:

body { color: white; background: gray; font-size: .5in }

@media screen and (min-width: 1024px){
    body { background: red; }
}

@media screen and (min-width: 641px) and (max-width: 1023px){
    body { background: yellow; }
}

@media screen and (max-width: 640px){
    body { background: green; }
}

for example :

@media (max-width: 480px) {

    .banner .logo img{width:140px}

    .banner.centered-banner > .fixed-width .banner-logo {
           width: 80%;
    }

    .container {
      width: 35%;
    }

}