Solved Media Query Issue

[Tyrone 3]

Hello everyone,

 

I'm trying to set up a page so an image will appear on larger resolution, but it will display on mobile / resolutions lower than 900px. As I understand it, I would need to use media queries to do this, but it doesn't seem to be working. Can someone help me figure out what I'm doing wrong. The code I have 

 

CSS (pretty much the default for Vesta)

 

@media screen and (max-width: 900px)
{
      body { min-width: auto!important; }
      .wrapper { width: 99%!important; }
      .showmobile, .flex, aside, .inner_wrapper { display: block; }
      .nomobile { display: none; }
      .nomargin { margin: 0; }
      .nav-tabs {display: flex; flex-direction: column, width: 20%; margin-right: 10px;}
      .navbar-collapse { flex-direction: column; }
      .navbar_toggle { display: inline-block; }
      .collapse { display: none; height: 0; }
      .collapse.in { height: auto; display: block; }
      .showmobile.mobileflex { display: flex; }
      .profile_header { background-position: top center; }
      .profile_name { bottom: 36px; left: 0; text-align: center; width: 100%; }
      .profile_group { position: absolute; bottom: 0; left: 0; text-align: center; width: 100%; }
      .profile_left { border: 0; }
      #top_blocks, #bottom_blocks { display: block; }

HTML Code for the picture I'm trying to apply this to

<div id="nomobile"><img style="margin-left: auto; margin-right: auto;" src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fmedia.giphy.com%2Fmedia%2FxsmZUmHCUshBC%2Fgiphy.gif&f=1&nofb=1" /></div>

 

Should this not be making the image disappear on devices with a resolution lower than 900px?

Edited August 12, 2020 by Grimscythe
Never mind I figured out I was using "div id=" rather than "div class=".