Show/hide different amount of elements by resolution

Question

I got some divs with a fixed width and height and they should push to left to all size of screen

What I want to achive is that based on resoulotion I want to show/hide some of them.

For example:

1024px - show 3 elements
1400px - show 5 elements

What is the best way to do this?

Here's my CSS:

.square{
  width:200px;
  height:200px;
  background:salmon;
  margin:5px;
  float:right;
}

.container{
  position:relative;
}

.wrapper-div{
  position: absolute;
  width: 1000px;
  transform: translateX(-50%);
  left: 50%; 
}

you will need to change the `.wrapper-div` `width` based on the resolution using `@media query` — Vitorino fernandes, Dec 31 '15 at 10:37
is the approach that i use correct ? i center them with transform and after that i'm gonna push them left — Sadeghbayan, Dec 31 '15 at 10:41
you can use `margin:0 auto` as it `div` a `block` element it will work — Vitorino fernandes, Dec 31 '15 at 10:42
Seems that this question has been made yet. Please try to not ask things that could have been asked before. http://stackoverflow.com/questions/4296012/hide-div-if-screen-is-smaller-than-a-certain-width — AlbertoFdzM, Dec 31 '15 at 10:44
how to push them left with overflow hidden and when size changed other div show up — Sadeghbayan, Dec 31 '15 at 10:45

score 1 · Answer 1 · answered Dec 31 '15 at 10:43

1

Yes this could be done easily with @media-queries.

A simple example of media queries are:

In the head of your html page you do:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

And the divs with the content:

<div class="square">

</div>

The css will look like this:

 @media (max-width:1024px) and (min-width:0px) {
    .square{
         your css width and etc..
    }
}

  @media (max-width:1400px) and (min-width:1025px) {
    .square{
         your css width and etc..
    }
}

More about it HERE

answered Dec 31 '15 at 10:43

Ananthakumar

323
1
14

i know the media query very well , the question is about correct soloution – Sadeghbayan Dec 31 '15 at 10:44
and how to push them left with overflow hidden and when size changed other div show up – Sadeghbayan Dec 31 '15 at 10:45
give your width in percentage for example 0 to 1200 media query width for square will be 33.33% or based on your margins and above 1200 width will be 20%. – Ananthakumar Dec 31 '15 at 10:48
@sani Then you should combine the media queries with the [:nth-child()](https://developer.mozilla.org/en-US/docs/Web/CSS/%3Anth-child) pseudo selector. `.square:nth-child(n+3)` – AlbertoFdzM Dec 31 '15 at 10:57
Look : i want to push them left with a fix width and add overflow hidden for not having scroll – Sadeghbayan Dec 31 '15 at 10:57
and overflow makes other div hidden based on screen size – Sadeghbayan Dec 31 '15 at 10:59

score 0 · Answer 2 · answered Dec 31 '15 at 11:17

You should combine the media queries with :nth-child() to handle that

CSS example code:

.square {
  /* Your square css */
}

@media (max-width: 1024px) {
  /* left displayed only the first 3th blocks */
  .square:nth-child(n+4) {
    display: none;
    visibility: hidden;
  }
}

@media (min-width: 1400px) {
  /* left displayed only the first 5th blocks */
  .square:nth-child(n+6) {
    display: none;
    visibility: hidden;
  }
}

Show/hide different amount of elements by resolution

2 Answers2