CODEWITHSUNDEEP
javascripthtmlcssmedia-queriesconditional-statements
motjuice
motjuice

Reputation: 43

CSS @Media Not working correctly

I have a piece of CSS that doesn't appear to be working and I don't know why. - I am using Dreamweaver CC and Multiple Browsers and the result is the same.

HTML

<div class="requirements-bulletdetail hide-desktop-wide show-desktop hide-tablet hide-phone" id="left_SubPanel_Training"
    style="display:none;">
    Each MOT tester must complete a minimum of 3hrs (180 mins) of training as per the cirruculum set down by the DVSA each year.
    It's important to note that if an MOT tester is dual class (Classes 1 &amp; 2 (GROUP A) AND Classes 3 to 7 GROUP B) then
    that tester MUST complete a minimum of 3hrs (180 mins) for EACH class group.
    <a href="#none" class="innerproductlink" onClick="switcherRooLeft('subPanelTraining')" id="SubPanelLink_Training">Learn About Training ...</a>
</div>

<!-- DESKTOP WIDE-->
<div class="requirements-bulletdetail hide-desktop-wide hide-desktop hide-tablet hide-phone" id="left_SubPanel_Training"
    style="display:none;">
    Each MOT tester must complete a minimum of 3hrs (180 mins) of training <br/>as per the cirruculum set down by the DVSA
    each year. It's important to note that if an MOT tester is dual class (Classes 1 &amp; 2 (GROUP A) AND Classes 3 to 7
    GROUP B) then that tester MUST complete a minimum of 3hrs (180 mins) for EACH <br/>class group.
    <a href="#none" class="innerproductlink" onClick="switcherRooLeft('subPanelTraining')" id="SubPanelLink_Training">Learn About Training ...</a>
</div>

CSS

.hide-desktop {
    display: none;
}

.show-desktop {
    display: inline-block;
}

@media (min-width: 960px) and (max-width:1199px) {
    .hide-desktop-wide {
        display: none;
    }
    .show-desktop-wide {
        display: inline-block;
    }
}

The problem is that even though I have this code in both sections:-

<a href="#none" class="innerproductlink" onClick="switcherRooLeft('subPanelTraining')" id="SubPanelLink_Training">Learn About Training ...</a>

It will not display at any browser width - and ... I have to keep the ID's the same as my Javascript references it. (and anyway I have other code elements on the page with duplicate ID names that work fine.

Any help / ideas greatly appreciated.

Thanks

Upvotes: 0

Views: 63

Answers (4)

Alex Mulchinock
Alex Mulchinock

Reputation: 2269

.hide-desktop-wide {
    display:none;
}

You're using this class on both divs.

<div class="requirements-bulletdetail **hide-desktop-wide** show-desktop hide-tablet hide-phone" id="left_SubPanel_Training" style="display:none;">
    Each MOT tester must complete a minimum of 3hrs (180 mins) of training as per the cirruculum set down by the DVSA each year. It's important to note that if an MOT tester is dual class (Classes 1 &amp; 2 (GROUP A) AND Classes 3 to 7 GROUP B) then that tester MUST complete a minimum of 3hrs (180 mins) for EACH class group. <a href="#none" class="innerproductlink" onClick="switcherRooLeft('subPanelTraining')" id="SubPanelLink_Training">Learn About Training ...</a>
</div>

<!-- DESKTOP WIDE-->
<div class="requirements-bulletdetail **hide-desktop-wide** hide-desktop hide-tablet hide-phone" id="left_SubPanel_Training" style="display:none;">
    Each MOT tester must complete a minimum of 3hrs (180 mins) of training <br/>as per the cirruculum set down by the DVSA each year. It's important to note that if an MOT tester is dual class (Classes 1 &amp; 2 (GROUP A) AND Classes 3 to 7 GROUP B) then that tester MUST complete a minimum of 3hrs (180 mins) for EACH <br/>class group. <a href="#none" class="innerproductlink" onClick="switcherRooLeft('subPanelTraining')" id="SubPanelLink_Training">Learn About Training ...</a>
</div>

Upvotes: 0

motjuice
motjuice

Reputation: 43

DOH!

I found the solution!

Stupidty is one of my greatest skills!

Upvotes: 0

Curtis
Curtis

Reputation: 103428

Rather than using media queries to hide and display particular elements I recommend using it to change the styling.

The differences in your div element classes are:

Default

  • hide-desktop-wide
  • show-desktop
  • hide-tablet hide-phone

Desktop

  • hide-desktop-wide
  • hide-desktop
  • hide-tablet
  • hide-phone

You should move these styles into the media query:

@media (min-width: 960px) and (max-width:1199px) {

   //hide desktop-wide, hide-desktop, hide-table, hide-phone styles here

}

This will remove your duplicate code in your HTML and allow control of the styling purely by CSS.

Upvotes: 2

Leon Freire
Leon Freire

Reputation: 818

You are missing !important in your CSS that you have to use since your display: none is inlined.

Your CSS needs to be like this:

.hide-desktop {
    display:none !important;
}

.show-desktop {
    display:inline-block !important;
}


@media (min-width: 960px) and (max-width:1199px) {

    .hide-desktop-wide {
        display:none !important;
    }

    .show-desktop-wide {
        display:inline-block !important;
    }

}

Upvotes: 0

Related Questions