How to use media queries properly

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%;
}
}

Answers


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 : )


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!


/* 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 */
}

Need Your Help

Google URL-Shortener API with API-Key returns "403 - Daily Limit for Unauthenticated Use Exceeded." using PHP & CURL

curl google-api-php-client api-key google-url-shortener

I created a reasonably simple script that would generate a random and unique password for me to reset users' passwords. Because I hate sending passwords as plain text over e-mail, my script convert...

Is there nowadays a crossbrowser and standard compliant way to prevent caching when using an XMLHttpRequest?

javascript cross-browser xmlhttprequest standards cache-control

Is there nowadays a crossbrowser and standard compliant way to prevent caching when using an XMLHttpRequest?