Bootstrap: @media min-width AND max-width does not work on Ipad

Question

I am trying to make the class "pad1" working on my Ipad (which has a width of 768px),

So I tried this code:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</head>

<body>

<style>
@media (min-width: 767px) and (max-width:991px){ 
    .pad1 {
        margin-top: 150px;
    }
}

</style>

<div class="container">

  <div class="row pad1">

    <div class="col-sm-4" style="background-color: orange;">

    AAAAA

    </div>

  </div>

</div>

</body>

</html>

But the padding does not work, whereas if I remove the and (max-width:991px) part it works..

I also tried some other solution from a different post, like:

@media only screen and (min-device-width: 767px) and (max-device-width: 991px) and (orientation:portrait) {

  .pad1 {
      margin-top: 150px;
  }

But it still not working, I am stuck here, and I absolutly need to limit the max width for this class, do you have any solution ?

Thank you

Seems like a problem with specificity - what happens if you add a `!important` to the rule? — Tieson T., Jun 05 '17 at 08:18
@Swellar I tried with just `max-width:991px` and it does not work, so the problem comes from `max-width` property I guess — aurelSon, Jun 05 '17 at 08:21
http://stephen.io/mediaqueries/#iPad Ipad all generation fall within the range `768` to `1024` — Shekhar Pankaj, Jun 05 '17 at 08:22
@Swellar Yeah I tried, also, does not work (but my Ipad is `768 px`, so I don't see why you suggest this solution) — aurelSon, Jun 05 '17 at 08:23
Possible duplicate of [CSS media query to target iPad and iPad only?](https://stackoverflow.com/questions/8271493/css-media-query-to-target-ipad-and-ipad-only) — Shekhar Pankaj, Jun 05 '17 at 08:24
@ShekharPankaj Yes indeed, the `@media all and (device-width: 768px) and (device-height: 1024px) and (orientation:landscape)` works for me, thanks — aurelSon, Jun 05 '17 at 08:28
@CedricGourville That is to say ? what it the purpose of this tag ? — aurelSon, Jun 05 '17 at 19:08

score 0 · Answer 1 · answered Jun 05 '17 at 08:33

0

Change To :

@media all and (min-device-width:767px) and (max-device-width:991px){ 
    .pad1 {
        margin-top: 150px;
    }
}

I hope ,help you.

answered Jun 05 '17 at 08:33

Ehsan

12,655
3
25
44

Bootstrap: @media min-width AND max-width does not work on Ipad

1 Answers1