Jump to content


Photo
- - - - -

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

Media Query

Best Answer Simon_P , 06 March 2014 - 06:11 PM

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

@media (min-width: 1400px)  {
    #site .visible-desktopLarge {
        visibility: visible;
    }
}
Go to the full post


  • Please log in to reply
7 replies to this topic

#1 balfred1345

balfred1345

    Advanced Member

  • Members

  • 95 posts
  • LocationFlyover Country, USA
  • Framework Version:Some sites Pagelines Framework (latest version), some sites DMS latest version
  • Country: Country Flag

Posted 06 March 2014 - 04:45 PM

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.webhos...oh6/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;
}
}


#2 Simon_P

Simon_P

    Messer

  • Administrators



  • 8388607 posts
  • LocationDevon
  • Framework Version:2.1.1
  • Country: Country Flag

Posted 06 March 2014 - 05:40 PM

display:visible is not valid css.

 

visibility:visible

 

You probably need to set it hidden by default too



#3 Simon_P

Simon_P

    Messer

  • Administrators



  • 8388607 posts
  • LocationDevon
  • Framework Version:2.1.1
  • Country: Country Flag

Posted 06 March 2014 - 05:41 PM

http://www.w3schools..._visibility.asp



#4 balfred1345

balfred1345

    Advanced Member

  • Members

  • 95 posts
  • LocationFlyover Country, USA
  • Framework Version:Some sites Pagelines Framework (latest version), some sites DMS latest version
  • Country: Country Flag

Posted 06 March 2014 - 06:06 PM

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



#5 Simon_P

Simon_P

    Messer

  • Administrators



  • 8388607 posts
  • LocationDevon
  • Framework Version:2.1.1
  • Country: Country Flag

Posted 06 March 2014 - 06:08 PM

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.



#6 Simon_P

Simon_P

    Messer

  • Administrators



  • 8388607 posts
  • LocationDevon
  • Framework Version:2.1.1
  • Country: Country Flag

Posted 06 March 2014 - 06:11 PM   Best Answer

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

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

  • balfred1345 likes this

#7 balfred1345

balfred1345

    Advanced Member

  • Members

  • 95 posts
  • LocationFlyover Country, USA
  • Framework Version:Some sites Pagelines Framework (latest version), some sites DMS latest version
  • Country: Country Flag

Posted 06 March 2014 - 10:50 PM

@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;
    }
}


#8 Danny

Danny

    Is Awesome!

  • Moderators
  • 15047 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 07 March 2014 - 02:46 PM

Thanks for informing us the issue has been resolved.







Also tagged with one or more of these keywords: Media Query