CODEWITHSUNDEEP
ipadcssresponsive-design
starbucks
starbucks

Reputation: 3016

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 only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) { 
 .container {
      width: 960px;
      max-width: 100%;
      height: 500px;
      background-color: #fff;
      border: 1px solid #000;
 }

By default the container has a min-width of 960px but I am using responsive design and the ipad is smalelr than the 960px width. Using the code above I thought if it's iPad, it will not pickup the min-width: 960px; but it is.

What can I do so that the min-width shows only on non-ipad css and on ipad css it doesn't do the min-width?

Upvotes: 0

Views: 376

Answers (2)

Pedrão
Pedrão

Reputation: 301

You can try:

@media screen and (min-width: 961px) {
    .container{
        min-height: 960px;
    }
}

It will aply the min-height rule only for devices with more than 960 pixels (width). Not affecting iPad resolution or below.

Or you can overwrite with an !important - but keep in mind this is not recommended.

Upvotes: 0

methodofaction
methodofaction

Reputation: 72385

Just add min-width: 0 (or 704px if necessary) to your media query:

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

Think of media queries as CSS declarations of your general stylesheet you need to override, don't re-write all the declarations.

Upvotes: 2

Related Questions