Jump to content
Search In
  • More options...
Find results that contain...
Find results in...

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 post
Share on other sites
Guest
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.