Jump to content

Archived

This topic is now archived and is closed to further replies.

balfred1345

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

Recommended Posts

balfred1345    5
balfred1345

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
Simon    247
Simon

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
balfred1345    5
balfred1345

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
Simon    247
Simon

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
Simon    247
Simon
#site .visible-desktopLarge {
    visibility: hidden;
}

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

Share this post


Link to post
Share on other sites
balfred1345    5
balfred1345

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
Danny    1,327
Danny

Thanks for informing us the issue has been resolved.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites

  • Similar Content

    • MobileParity
      By MobileParity+
      I have added 2 separate text boxes to my header to display the business name of my site. When the site is viewed on a mobile device the header text does not resize to fit the device. I have tried to use media queries albeit incorrectly. I have messed with padding & text size as well. However nothing seems to work. I know this can be done an it is fairly simple so forgive my lack of knowledge. The site is password protected and I can provide the information if needed. You can view the image here: http://screencast.com/t/y35EkMc1hcl
       
      Cheers,
       
      AG
    • brightonkeller
      By brightonkeller+
      The responsive mobile theme built into pagelines is excellent, but there's one thing I'm curious about. 
       
      I see that content-width, when viewed from a mobile device, is 100% of the width. And that's great. But many of my readers say that they can't zoom in on pictures. Is there any way to enable them to zoom when viewing from their phone? thanks!
       
      if so, could you point me in the right direction as far as CSS selectors and/or anything else you might be familiar with?
×