CODEWITHSUNDEEP
javascripthtmlcssangularjs
EternalWulf
EternalWulf

Reputation: 773

Remove or hide images based on browser window size

In a piece of angular JavaScript, there is an ng-repeat command that prints a line of small images.

I need this line to not overlap into two lines when the browser window is re-sized. Thus, if the size gets too small, instead of pushing some of these down into a second line, it should just hide them or remove some of them.

How can I go about accomplishing this?

Is it possible to do this using only CSS?

Upvotes: 1

Views: 6031

Answers (3)

ChevCast
ChevCast

Reputation: 59213

This is called responsive design. You'll want to use CSS media queries or a CSS library like bootstrap which has responsive classes to hide/show elements based on target window/device size.

Media query example:

@media (max-width: 700px) {
  img#yourImage {
    display: none;
  }
}

Working media query demo: http://codepen.io/Chevex/pen/oXxKLe

Bootstrap example:

<html>
  <head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" />
  </head>
  <body>
    <img class="hidden-xs" src="http://i.imgur.com/1XKZPVe.png" />
  </body>
</html>

Working bootstrap demo: http://codepen.io/Chevex/pen/ZGWgpb

Bootstrap is just using media queries in its own stylesheet. It's just nice to have a stylesheet with predefined classes for a range of different devices so you don't have to craft your media queries yourself :)

Upvotes: 6

bto.rdz
bto.rdz

Reputation: 6720

Yes it can be done with css

@media (min-width: 700px) { 
   .myClass{
       display: none;
   }
}

Upvotes: 1

AmmarCSE
AmmarCSE

Reputation: 30557

Yes, it is possible with only css. You will have to use media queries and decide the ranges in which you want your elements to appear and disappear

@media (min-width: 500px) and (max-width: 600px) {
        myelement {
          display: none;
        }
 }

@media (min-width: 700px) and (max-width: 1000px) {
        myelement {
          display: block;
        }

 }

These will also handle when the browser is resized.

Upvotes: 9

Related Questions