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
Post a Comment