How do I overwrite a CSS property for iPad only? -


code:

 .container {       width: 960px;       max-width: 100%;       min-width: 960px;       height: 500px;       background-color: #fff;       border: 1px solid #000;  }  @media screen  , (min-device-width : 768px)  , (max-device-width : 1024px)  , (orientation : portrait) {   .container {       width: 960px;       max-width: 100%;       height: 500px;       background-color: #fff;       border: 1px solid #000;  } 

by default container has min-width of 960px using responsive design , ipad smalelr 960px width. using code above thought if it's ipad, not pickup min-width: 960px; is.

what can min-width shows on non-ipad css , on ipad css doesn't min-width?

just add min-width: 0 (or 704px if necessary) media query:

@media screen  , (min-device-width : 768px)  , (max-device-width : 1024px)  , (orientation : portrait) {   .container {       min-width: 0;   } } 

think of media queries css declarations of general stylesheet need override, don't re-write declarations.


Comments

Popular posts from this blog

plot - Remove Objects from Legend When You Have Also Used Fit, Matlab -

java - Why does my date parsing return a weird date? -

Need help in packaging app using TideSDK on Windows -