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

image - ClassNotFoundException when add a prebuilt apk into system.img in android -

I need to import mysql 5.1 to 5.5? -

Java, Hibernate, MySQL - store UTC date-time -