Materialize always showing responsive content

Question

I am creating a user interface that is to be responsive. I have three buttons that I would like to move into a drop down when the users screen size dictates.

My issue is that the "show-on-med-and-down" helper I am using to display the drop down menu is always showing regardless of the screen size.

The materialize helper "hide-on-med-and-down" is working and the content is being hidden correctly, but I cannot get the drop down to display only when the screen is medium and down.

<div class="entry">
     <div class="icon> icon for  user </div>
     <div class="name"> user name </div>


     <ul class="hide-on-med-and-down">
         <div class="button>yes</div>
         <div class="button>no</div>
         <div class="button>maybe</div>
     </ul>



     <ul class="show-on-med-and-down">
        <div class="dropdown"> dropdown menu</div>
     </ul>


</div>

I expect this code to show exclusivity the drop down button or the three buttons in any case. But as you can see from my attached screenshot the dropdown menu place holder always is shown.

large view

small view

Thank you for your time in advance.

Answer 1

"show-on-med-and-down" css class just set the display property when the screen width is > 600px.

You need to set the style of the item to be style="display: none;"

OR change the class to "hide-on-large-only" (suggested).