Skip to main content
Inspiring
January 24, 2017
Answered

suppress image in multiple media queries

  • January 24, 2017
  • 3 replies
  • 596 views

I have an image I would like hidden (display:none) from all breakpoints except for desktop, uncollapsed or widest/largest view.

How can I write a query to target all the other breakpoints min-max and how do I do this if the image is within a div, contained within another positioning div?

...Was not sure if it is the container that needs to be targeted or the img div itself?

Much appreciated!

.imgContainer {

    width:100%;

    margin-top: -8%;

    margin-left: 3%;

    position: relative;

    z-index: -5;

}

    .imginHere {      

    background: url('../img/photo.png') no-repeat;

    width:273px;

    height:218px;

    position: absolute;

    z-index: -5;

}​​​​​​​​​

    This topic has been closed for replies.
    Correct answer Nancy OShea

    Bootstrap has built-in utility classes for tuning display on/off at any breakpoint(s) you specify (xs, sm, md, lg)

    Bootstrap CSS Helper Classes Reference

    Example:

    <div class="visible-lg">

    This is displayed to large devices only.

    </div>

    Nancy

    3 replies

    Nancy OShea
    Community Expert
    Nancy OSheaCommunity ExpertCorrect answer
    Community Expert
    January 24, 2017

    Bootstrap has built-in utility classes for tuning display on/off at any breakpoint(s) you specify (xs, sm, md, lg)

    Bootstrap CSS Helper Classes Reference

    Example:

    <div class="visible-lg">

    This is displayed to large devices only.

    </div>

    Nancy

    Nancy O'Shea— Product User & Community Expert
    r_tistAuthor
    Inspiring
    January 24, 2017

    Brilliant! ...and the key word here is 'only'.

    BenPleysier
    Community Expert
    Community Expert
    January 25, 2017

    You may also want to have a look at GitHub - ArranM/BootstrapImageReplacement: Quickly download different size images depending on current media query view

    The above method downloads only the image that is required for the relevant media query saving bandwidth, while the 'hide' method downloads all of the different sized images.

    Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!
    pziecina
    Legend
    January 24, 2017

    You could create a single media query using the not operator, chaining together, (using the and operator) all the sizes and orientations you do not want the image to be applied to -

    https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

    Jon Fritz
    Community Expert
    Community Expert
    January 24, 2017

    It will likely be best to hide the container, as long as you don't have other content within it that you still want to display.

    Add the class to the smaller MQs and use display:none...

    .imgContainer {display:none;}

    Then add display:block to the MQ that you do want the info to appear in.