Media Query Not Overriding

[Satchmo37]

So I’m at a loss here, I’m trying to shrink some icons for mobile devices. I’ve tried everything I’ve read to do, I’ve added !important in the query, I’ve prepended ancestors, I’ve tried using percentages, etc. but nothing shrinks the images. I’m sure I’m missing something little but I’ve been stuck for nearly two hours (I’ve learned a lot of other good stuff while being stuck in this hole at least).

Any help will be greatly appreciated…
HTML:

<div id='icons'>
        <div>
            <img src='img/front-icons.png' id='front-icon'>
        </div>
        <div id='other-icons'>
            <img src='img/api-icon.jpg'>
            <img src='img/jquery-icon.png'>
            <img src='img/ajax-icon.jpg'>
        </div>
        <div id='r2'><img src='img/r2.png'></div>
    </div>

CSS:

#front-icon {
    display: block;
    width: 350px;
    height: 200px;
    margin: 0 auto;
}

#other-icons img {
    display: inline-block;
    width: 140px;
    height: 150px;
    margin: 0 auto;
}

#r2 img {
    display: inline-block;
    width: 140px;
    height: 150px;
    margin: 0px auto;
}

@media (max-width: 667px)) {
    #front-icon, 
    html #icons #other-icons img, 
    body #icons #r2 img{
        width: 30px !important;
        height: 30px !important;
    }
}

[Shikkediel]

I think you forgot to add screen and after @media. There’s a superfluous parenthesis after screen width too.

[Satchmo37]

Jeez, it’s always the little things…

Thanks!

[Author]

Posts