Jump to content

Media Query Issue


Recommended Posts

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 by Grimscythe
Never mind I figured out I was using "div id=" rather than "div class=".
Link to comment
Share on other sites

  • Replies 0
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

This topic is now closed to further replies.

  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...

Important Information

By using this site, you agree to our Terms of Use, Guidelines and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.