CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
GJain
GJain

Reputation: 5093

Need responsive on mobile but not responsive on desktop

I followed these steps to make bootstrap not responsive on desktop but responsive on mobile

http://getbootstrap.com/getting-started/#disable-responsive

But it is also not-responsive on mobile. How can I make it responsive on mobile?

  <!--<meta name="viewport" content="width=device-width, initial-scale=1">-->

In my custom css

@media(max-width:480px) {
  .container {
    width: 480px !important;
  }
}

.container { width: 970px !important; }

HTML

        <div class="row topBlock" id="topBlock">
            <div class="col-xs-5 text-center">
                <div class="marketing" id="download">
                    <div class="col-xs-12" class="download-badges1">
                    </div>
                </div>
            </div>
            <div class="col-xs-7 text-center">
            </div>
       </div>

Upvotes: 0

Views: 100

Answers (1)

hungerstar
hungerstar

Reputation: 21685

.container { width: 970px !important; } is overriding your media query. Reverse the selectors and set the width to auto; in the media query so .container does not have a fixed width and will expand to fill the viewport.

.container { width: 970px; }
@media( max-width: 480px ) {
  .container { width: auto; }
}

Or better yet, usa a mobile first approach and only define a width when the viewport has scaled beyond on certain width.

@media( min-width: 481px ) {
  .container { width: 970px; }
}


div {
  height: 200px;
  margin: 0 auto;
  background-color: rebeccapurple;
}

@media ( min-width: 360px ) {
  div {
    width: 200px;
    background-color: gold;
  }
}
<div></div>

It's easy to think that wrapping a selector in a media query would give it a higher specificity, but it doesn't.

@media ( min-width: 360px ) {
  .abc { color: red; }
}
.abc { color: blue; }

Amounts to:

.abc { color: red; }
.abc { color: blue; }

Where .abc is going to be blue because the specificity of .abc remains the same, regardless of it being in media query. So the latter rule wins out.

Upvotes: 1

Related Questions