In bootstrap media query not working

Question

I applied media query in my CSS to change width but is not working it's not over right the predefined CSS I need to change width of my container any solution

 @media (min-width:640px) and (max-width: 768px) {
    .container{
     width: 674px;
     max-width: 100%;
    }
    }

i guess you are writing media queries after you have applied initial css. Whatever property comes later in css file applies to the page or element in question. — Amit Kumar Singh, Aug 13 '17 at 04:58
try adding `!important`. `width: 674px !important;max-width: 100% !important;` — jarvo69, Aug 13 '17 at 05:00
sequence of your css matter. first add css for your larger screens and then the media queries for the other breakpoints. latest css properties override if it already exists — Rahul Viswanath, Aug 13 '17 at 05:35

score 0 · Answer 1 · answered Aug 13 '17 at 06:33

As others have explained in the comments, the easiest way of getting what you want is by adding !important after the style values. See the snippet below to understand how it can done. But note that use of !important is often discouraged.

I have added a color: red just to make it easier to spot when your style is getting applied.

@media (min-width:640px) and (max-width: 768px) {
    .container{
     width: 674px !important;
     max-width: 100% !important;
      color:red;
    }
  }

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
  Labore assumenda ipsa ea doloremque et. Est ipsam sint rem est numquam. Cum maiores officia quam. At sapiente cum quidem sit et.
Aut atque aut eligendi aut. Quo id dolorum saepe consequatur eum. Rem quos qui qui.
Aut accusantium provident cum occaecati quia rerum et doloremque. Quo quibusdam adipisci mollitia qui quia. Voluptatem quis nisi at culpa nostrum mollitia enim assumenda. Rem saepe voluptates quas quia dolorem.
Nulla eum alias vel sequi recusandae alias nobis. Est possimus quos non aut consequuntur. Debitis inventore est quis fugit in deserunt excepturi ducimus. Nihil quibusdam odio et nulla voluptatem ut. Qui ullam ut vitae eos et at qui perferendis.
Qui aut rerum dolores vitae. Vitae aut quaerat eligendi ut sed. Soluta suscipit repellendus ad maiores quia et sequi. Omnis molestiae explicabo perferendis beatae et. Autem qui fuga esse beatae
</div>

A preferable approach would be to add your styles after bootstrap's styles so that they take priority over bootstrap's default. See this to understand more about how stylesheets are prioritized in the browser: In which order do CSS stylesheets override?

In the snippet below, I have added custom stylesheets after the link tag that imports bootstrap's CSS. As a result, the custom stylesheets are given preference over bootstrap.

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<style>
  @media (min-width:640px) and (max-width: 768px) {
    .container{
     width: 674px;
     max-width: 100%;
      color:red;
    }
  }
</style>

<div class="container">
  Labore assumenda ipsa ea doloremque et. Est ipsam sint rem est numquam. Cum maiores officia quam. At sapiente cum quidem sit et.
Aut atque aut eligendi aut. Quo id dolorum saepe consequatur eum. Rem quos qui qui.
Aut accusantium provident cum occaecati quia rerum et doloremque. Quo quibusdam adipisci mollitia qui quia. Voluptatem quis nisi at culpa nostrum mollitia enim assumenda. Rem saepe voluptates quas quia dolorem.
Nulla eum alias vel sequi recusandae alias nobis. Est possimus quos non aut consequuntur. Debitis inventore est quis fugit in deserunt excepturi ducimus. Nihil quibusdam odio et nulla voluptatem ut. Qui ullam ut vitae eos et at qui perferendis.
Qui aut rerum dolores vitae. Vitae aut quaerat eligendi ut sed. Soluta suscipit repellendus ad maiores quia et sequi. Omnis molestiae explicabo perferendis beatae et. Autem qui fuga esse beatae
</div>

In bootstrap media query not working

1 Answers1