• 0

How Create New Media Query To Show Image based on Screen Size


Question

Posted · Report post

Hi,

I'm attempting to create a new Media Query to allow a high rez image to show above 1400px. In other words, I'd like to have a fourth image size beyond that which I'll use with the .visible-desktop utility class that is part of Bootstrap.

 

You can see my non-working attempt in the section with the orange placeholder images here: http://whub34.webhostinghub.com/~videoh6/cidev2.com/

 

HTML and LESS is below.

 

Thanks very much!

-Bruce

 

Here's what I've tried:

HTML in a grid in a text-box referencing the class visible-desktopLarge:

<div class="span9 zmt zmb"><span class="visible-desktopLarge"><img src="http://whub34.webhostinghub.com/~videoh6/cidev2.com/wp-content/uploads/2014/01/Placeholder870x365.jpg" alt="Placeholder870x365" width="870" height="365"/></span>

LESS:

@media (min-width: 1400px)  {
    #site .visible-desktopLarge {
    display: visible;
}
}

Share this post


Link to post
Share on other sites

7 answers to this question

  • 0

Posted · Report post

#site .visible-desktopLarge {
    visibility: hidden;
}

@media (min-width: 1400px)  {
    #site .visible-desktopLarge {
        visibility: visible;
    }
}
1 person likes this

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

display:visible is not valid css.

 

visibility:visible

 

You probably need to set it hidden by default too

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Thanks for the reply, Simon.

 

I changed the CSS to visibility:visible;

 

The Media Query still is not working, since when I scroll under 1200px, the image does not disappear as expected given the setting of (min-width: 1200px).

 

Am I misunderstanding the way Media Queries work? 

 

Thanks,

Bruce

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

the image has to be not visible to start with.

 

At the moment the image is visible, then when you go over 1200 the media query adds visble.. which it already is.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Simon_P

Thank you so much! I really appreciate your explaining this. 

 

For anyone looking at this post to figure out Media Queries...

You'll need to add the display selector to make the layout work correctly:

 

#site .visible-desktopLarge {
        display: none;
        visibility: hidden;
}
 
@media (min-width: 1400px)  {
    #site .visible-desktopLarge {
        visibility: visible;
         display: inline;
    }
}

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Thanks for informing us the issue has been resolved.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now