How to use media queries properly

Question

I am designing a responsive web page. I have a div whose width should decrease when the screen size decreases.

This div also contains a list of two image links. They should remain inline even when the screen width decrease.

/* The CSS */
div.mymenu{
margin-right:7%;
margin-top:-53px;
background:#000;
width: 28.5%;
opacity:0.8;
}

div.mymenu > .nav-pills{
margin-bottom:7px;
}

div.mymenu > .nav-pills a{
color:#fff;
margin-left: 30%;
}

div.mymenu > .nav-pills a:hover{
background:none;
} 

<!-- The HTML -->

<div class="mymenu pull-right">
            <ul class="nav nav-pills">
                <li><a href="">Why Us</a></li>
                <li><a href=""><img src="img/news.png" /></a></li>
                <li><a href=""><img src="img/help.png" /></a></li>
            </ul>
        </div>

I am using twitter bootstrap. I tried making changes to bootstrap-responsive.css - but no change. I made changes such as :-

@media (min-width: 768px) and (max-width: 979px) {
.mymenu{
 width: 20%;
}
}

Try to replicate the issue in [jsfiddle](http://jsfiddle.net) or similar to get a better and more useful answer — Tomas Ramirez Sarduy, Mar 31 '15 at 21:03

score 3 · Answer 1 · answered Apr 05 '13 at 21:32

For fluid designs, I very much recommend using Skeleton: http://www.getskeleton.com/

Here you have a standard for @media queries

/* #Tablet (Portrait)
================================================== */
    /* Note: Design for a width of 768px */

    @media only screen and (min-width: 768px) and (max-width: 959px) {

    }


/*  #Mobile (Portrait)
================================================== */
    /* Note: Design for a width of 320px */

    @media only screen and (max-width: 767px) {

    }


/* #Mobile (Landscape)
================================================== */
    /* Note: Design for a width of 480px */

    @media only screen and (min-width: 480px) and (max-width: 767px) {

    }

Greetings from Argentina!

score 3 · Answer 2 · answered Mar 07 '14 at 17:03

/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen 
and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen 
and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
/* Styles */
}

/* Desktops and laptops ----------- */
@media only screen 
and (min-width : 1224px) {
/* Styles */
}

/* Large screens ----------- */
@media only screen 
and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}

score 2 · Accepted Answer · answered Apr 05 '13 at 21:15

2

Your current media query is going to limit those styles to browsers between 768px and 979px. Remove the 2nd media query (979) to have it apply to all viewports wider than 768 px.

@media (min-width: 768px)  {
    .mymenu {
      width: 20%;
    }
}

Also, just a note, i'd suggest trimming selectors like div.mymenu down to just .mymenu the div limits the applicability of the selector (perhaps you will want a ul to have the same styles as .mymenu) and it's more typing : )

answered Apr 05 '13 at 21:15

Nick Tomlin

28,402
11
61
90

can I make this change in a new media queries file or shld i include it in bootstrap-responsive.css? – Stacy J Apr 05 '13 at 21:17
You can do it in either. Although, for organizational reasons I would suggest using a separate ``mystyles.css`` document, putting your modifications in there, and then using css's ``@import`` [info - MDN](https://developer.mozilla.org/en-US/docs/CSS/@import) to bring in the bootstrap files. Ideally though, you would combine all your css files together in one minified file with a utility like [codekit](http://incident57.com/codekit/) or [smoosh](https://github.com/fat/smoosh). Otherwise, it can be difficult to locate your changes amongst the bootstrap code. – Nick Tomlin Apr 05 '13 at 21:25
hey, I tried, but no change. The icons are coming in a separate line and no change in width – Stacy J Apr 05 '13 at 21:27
Try changing ``div.mymenu`` to ``.mymenu``. Also, Can you make a [codepen](http://codepen.io/) example? – Nick Tomlin Apr 05 '13 at 21:31

How to use media queries properly

3 Answers3