wordpress - CSS small screen issue -


my query wordpress site womensfertility n hormones. c o m if view site on smaller screen resolution 1024 x 768 site this:

enter image description here

but if view on normal computer screen big resolution looks good, if scale iphone , ipad scale normal responsive. i'm using optimizepress. i've added code make site boxed layout , have background image instead of full width. code 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 width: 75%; , .banner .logo img { width: 200px; } makes site looks way, have no idea how make site boxed without doing code. idea?

use css media queries

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

or:

body { color: white; background: gray; font-size: .5in }  @media screen , (min-width: 1024px){     body { background: red; } }  @media screen , (min-width: 641px) , (max-width: 1023px){     body { background: yellow; } }  @media screen , (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%;     }  } 

Comments

Popular posts from this blog

android - Get AccessToken using signpost OAuth without opening a browser (Two legged Oauth) -

org.mockito.exceptions.misusing.InvalidUseOfMatchersException: mockito -

google shop client API returns 400 bad request error while adding an item -