CSS media query not working to remove content

Where is your code?

We can't help you if you don't show us what you did.

Give us a link (first prize)
Failing that (or in addition) show us the context of the code above and the CSS that you are trying to use to manage it.

https://wildernessclubmontana.com/wp-content/themes/wcm/assets/styles/layouts/_dropdownmenu.css

<div class="mnuwrp">
<div id="demo">
    <div class="wrapper">
    <div class="parent"><span class="fas fa-info-circle"></span>  About</div>
        <div class="content">
            <ul>
                <a href="https://www.wildernessclubmontana.com/about-us/">
                <li><span class="fas fa-landmark"></span> History</li></a>
                <a href="https://www.wildernessclubmontana.com/about-us/">
                <li> <span class="fas fa-user-friends"></span> Staff</li></a>
                <a href="https://www.wildernessclubmontana.com/about-us/faq">
                <li> <span class="fas fa-question"></span> FAQ</li></a>
                <a href="https://www.wildernessclubmontana.com/about-us/contact">
                <li> <span class="fas fa-envelope"></span> Contact</li></a>
            </ul>
        </div>
        
    </div>
    
    <div class="wrapper">
        <div class="parent"><span class="fas fa-users"></span> Family Resort</div>
        <div class="content">
            <ul>
                <a href="https://www.wildernessclubmontana.com/family-resort/golf/"><li><span class="fas fa-golf-ball"></span> Golf</li></a>
    <a href="https://www.wildernessclubmontana.com/family-resort/water-park"><li> <span class="fas fa-swimmer"></span> Water Park</li></a>
    <a href="https://www.wildernessclubmontana.com/family-resort/spa-and-wellness"><li> <span class="fas fa-spa"></span> Spa & Wellness</li></a>
    <a href="https://www.wildernessclubmontana.com/family-resort/dining"><li> <span class="fas fa-utensils"></span> Dining</li></a>
    <a href="https://www.wildernessclubmontana.com/family-resort/golf/"><li><span class="fas fa-golf-ball"></span> Water Park</li></a>
    <a href="https://www.wildernessclubmontana.com/family-resort/sports-park"><li> <span class="fas fa-running"></span> Sports Park</li></a>
    <a href="https://www.wildernessclubmontana.com/family-resort/lake"><li> <span class="fas fa-water"></span> Wilderness Lake</li></a>
    <a href="https://www.wildernessclubmontana.com/family-resort/disc-golf"><li> <span class="fas fa-compact-disc"></span> Disc Golf</li></a>
            </ul>
        </div>
        
    </div>
</div>

Select allOpen in new window

Hi,

you can set the div to display none instead of height..

your media query
class name

{
  display: none;
}

Select allOpen in new window

Usually we go the other way. Hide for mobile and the expressly show for desktop

Try it this way

 .mnuwrp {
   height:40px;
   background-color:#433224;
   visibility:hidden;
}
@media screen and (min-width: 500px) {
   .mnuwrp {visibility:visible}
}

Select allOpen in new window

Hi,

make sure there is no typo in class name

from your question
class="wrpmnu"

from another post
class="mnuwrp"

display none will hide the content of the entire div

but you need to make sure there is no other related CSS class that come after that because that will override it .
le say you have 2 css files
url to main.css
url to responsive.css
responsive.css will overide main.css if the same class name is in both file, if a class have important that will keep it.

If you resize the browser, put your cursor on the part that is appearing and should be hidden
if you put your right click / inspect on that part check the CSS class at the right this will point you to the class and file use for that part.

Verified the class name by changing it to something completely new

@media screen and (min-width: 701px) {
	.drpm {height:40px; background-color:#433224; visibility:visible;}
}

Select allOpen in new window

and using Julian's suggestion. It still shows on Mobile. Actually, the .drpm div goes away but all the content inside the .drpm still shows.

and using Julian's suggestion. It still shows on Mobile. Actually, the .drpm div goes away but all the content inside the .drpm still shows.

It works for me when I upload the style.
Did you remember to add visibility: hidden to the base class as well.

@Julian yes. I did it exactly as you suggested.  Do you suppose it could be the DIV tag that is creating the inability to do this? Other than the DIV, is there another tag I can use as a wrapper that may respond to the visibility thing? I mean, I  can wrap all the menu  in a different tag and maybe it will work.

Have you got a link? I guessed it from the CSS link you posted but then had to do some gymnastics to uncomment the code.

Do you have a link with your most recent changes?

https://www.wildernessclubmontana.com/wp-content/themes/wcm/assets/styles/layouts/_dropdownmenu.css

same exact html markup for the divs

Hi,

because it is a menu, I suspect that you may have some hardcoded CSS in the Javascript menu code, if it's the case you will need to edit from there.

Also some template have JavaScript to hide and show the menu base on device width, so I would check the main javacript file that come with the template.

I meant do you have a link to the page with the markup on?

https://www.wildernessclubmontana.com/

It's commented out in the html (my div tags for the navigation menu)

Hi,

you have javascript error it's not finding Javascript file, so make sure the link is ok and the file is upload at the correct place

- Failed to load resource: the server responded with a status of 404 (Not Found)
drpmnu.js:1
- Failed to load resource: the server responded with a status of 404 (Not Found)
(index):17 Uncaught TypeError: window.addEvent is not a function
    at (index):17
- jquery-1.12.4-wp.min.js:1 Failed to load resource: the server responded with a status of 404 (Not Found)

To see these error use chrome right click / inspect.

for example you tried to reach this file https://code.jquery.com/jquery-1.12.4-wp.min.js


This link should be place after the jquery link
<script type="text/javascript" src="/wp-admin/themes/wcm/assets/scripts/drpmnu.js"></script>

About the jquery-1.12.4-wp.min.js file I don't know if this is the file that come with the theme or if it is a custom file.
You can use local file (the method i prefer)
 or use CDN if you use CDN make sure you are using the correct link
https://code.jquery.com/jquery/


Once you have fix these error this should work ok
you can try to contact the theme author for support if you use a premium theme

I have the 403 errors fixed but now the mobile page disappears entirely instead of just removing the DIV tag DRPM like my class code requests. It looks fine on desktop. I tested my browser width and the entire page disappears on my desktop when the browser hits the mobile page width. I don't understand why the  entire page goes away instead of just the div tag at the top of the page for the dropdown menu.

Do you have a link with your latest code?

Julian, I didn't change my code at all. I just fixed the broken link in the header and actually moved my CSS to the MAIN.CSS file that was already the main referenced file for the entire site. The CSS is functioning on the desktop to make it look and layout like I want but it simply removes the entire page if it's under 701 pixels view wide. I don't understand why it's completely making the page blank when all my code calls for is to make that .drpm div tag visibility:hidden. It presumes to hide the entire page, not just that div.

To be able to diagnose this we need to see a link. The only links you have provided are to CSS files and assuming the link from there gives us a page with the code in question commented out.

The question I am asking is - do you have a link that replicates the problem.

Hi,

from the live link there is still a 404 errors for jquery-1.12.4-wp.min.js

I can't  find the jquery file in my  code files for the WordPress site. It must be part of a plugin that is inserting it. I'm not sure if that's affecting it or not.