XF 2.2 @Media mobile Issues

[Dark_Angel]

Hey ya'll,

Back again, working on the same thing - mod list --> integrated into each node.

So I got everything working right on most browsers and resolutions.. but now I am having issues with mobile where my moderator list seems to break the page over into the background div. I have tried over and over to add @media to it so the div containing the list does not display under a fixed width, yet it still does. I used the same code for the thead that labels everything to not be displayed on mobile, and it works. This has made me extremely confused as the code is not wrong, yet for some reason it does not register anything I write under @media for this particular div.

HTML:

<div class="modlist">
<xf:foreach loop="$node.Moderators" value="$moderator">
<li><xf:username user="{$moderator.User}" defaultname="{$moderator.User.username}" style="font-size:14px;" /></li>
</xf:foreach>
</div>

CSS:

li.modlist, div.modlist
{
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px){
.modlist{
display: none;
} }
}

.modlist
{
display: table-cell;
width:10%;
text-align: center;
padding-right:30px;
vertical-align: middle;
white-space: nowrap;
}

Thanks for any help in advance!

 

[OUTL4W]

have you tried?
extra.less

@media (max-width: 650px){
         .modlist {display:none;}
}

 

[Dark_Angel]

Well I got temporary fix by changing the width of the div from 10% to 100px, where now it at least is inside the node.

I would like to get it where it doesn't even display on mobile, if anyone has any idea!

 

[Dark_Angel]

have you tried?
extra.less

@media (max-width: 650px){
         .modlist {display:none;}
}

Yep that seemed to do the trick, Thank you!