CODEWITHSUNDEEP
htmlcssmedia-queries
user3381297
user3381297

Reputation: 7

Media Query targeting Specific Image

I can't figure out what I'm doing wrong here... I have two images in "sliderbox" and I need one of them to disappear on mobile and smaller devices. I'm trying to create a new class and then hiding that class, but nothing is happening. Thanks in advance!

Source:

<section class="sliderbox" id="menu-homepage">
    <img src="img/arrow.png" class="arrow" alt="image" width="300" height="85"    align="right">

Media Query:

@media handheld, only screen and (max-width: 980px) {
    .theme-default .nivo-caption{
    font-size: 21px;
    }

    .theme-default .nivoSlider{
    height: inherit;
    }
.sliderbox-class-arrow {
    display: none;
}

Live @ gradepowerbrandon.com/test

Upvotes: 0

Views: 273

Answers (2)

Alex Todef
Alex Todef

Reputation: 370

I checked your test page. It comes to me that you probably just forgot to add '.sliderbox-class-arrow' class to your image? I tried to add it, and it works fine for me.

Upvotes: 0

Siyah
Siyah

Reputation: 2897

That's because you are doing it incorrectly.

This is how it should be:

.sliderbox img.arrow {
    display: none;

You must not write the word 'class'. Just the name.

Upvotes: 1

Related Questions