CODEWITHSUNDEEP
htmlcssresponsiveelement
Pato
Pato

Reputation: 61

Responsive 5 div elements CSS, one by one

I have trouble with 5 div elements to make it responsive.

I have this this div elements like this:

<div class="AllCont">
  <div class="ContQuint">
    <div>Here Image 1</div>
  </div>
  <div class="ContQuint">
    <div>Here Image 2</div>
  </div>
  <div class="ContQuint">
    <div>Here Image 3</div>
  </div>
  <div class="ContQuint">
    <div>Here Image 4</div>
  </div>
  <div class="ContQuint">
    <div>Here Image 5</div>
  </div>
</div>

The style CSS like this:

.AllCont {
  display: table;
  border-collapse : collapse;
  width: 100%;
}
.ContQuint {
  display: table-cell;
  width: 20%;
}

And trying to do it responsive with this in CSS:

@media only screen and (max-width:1540px) {
.ContQuint {
    display: table-row;
  }
}

But i dontk want that. I want something like this:

| Elem 1 - Elem 2 - Elem 3 - Elem 4 - Elem 5 |

Then when the screen size decreases a little bit I want this:

| Elem 1 - Elem 2 - Elem 3 - Elem 4 |

| Elem 5 |

Then when decreases more:

| Elem 1 - Elem 2 - Elem 3 |

| Elem 4 - Elem 5 |

Then a little more:

| Elem1 - Elem 2 |

| Elem 3 - Elem 4 |

| Elem 5 |

And Finally:

| Elem 1 |

| Elem 2 |

| Elem 3 |

| Elem 4 |

| Elem 5 |

How can i do that with CSS or javascript?

Upvotes: 0

Views: 1546

Answers (5)

G-Cyrillus
G-Cyrillus

Reputation: 106078

You may use flex, width + flex-wrap and min-width to spare a mediaquerie.

.AllCont {
  display: flex;
  flex-wrap: wrap;
}
.ContQuint {
  width: 20%;
  /* optionnal*/
  min-width: 300px;/* this is alike your breaking point ... each 300px or else value you set */
  padding: 1px;
  box-sizing:border-box;
}
img {
  /* optionnal*/
  display: block;
  width: 100%;
}
<div class="AllCont">
  <div class="ContQuint">
    <div>
      <img src="http://dummyimage.com/300x200">
    </div>
  </div>
  <div class="ContQuint">
    <div>
      <img src="http://dummyimage.com/300x200"> </div>
  </div>
  <div class="ContQuint">
    <div>
      <img src="http://dummyimage.com/300x200"> </div>
  </div>
  <div class="ContQuint">
    <div>
      <img src="http://dummyimage.com/300x200"> </div>
  </div>
  <div class="ContQuint">
    <div>
      <img src="http://dummyimage.com/300x200"> </div>
  </div>
</div>

pen to play with

Upvotes: 1

Gerardo BLANCO
Gerardo BLANCO

Reputation: 5648

Should probabliy take a look into responsive layout, this will help you a lot understanding different patterns.

Responsive patterns by google

Either way i recommend the use of flexboxes or inline/block elements.

Solution using flexboxes : 

.AllCont {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  border-collapse : collapse;
  width: 100%;
}
.ContQuint {
    width: 200px;
}
<div class="AllCont">
  <div class="ContQuint">
    <div>Here Image 1</div>
  </div>
  <div class="ContQuint">
    <div>Here Image 2</div>
  </div>
  <div class="ContQuint">
    <div>Here Image 3</div>
  </div>
  <div class="ContQuint">
    <div>Here Image 4</div>
  </div>
  <div class="ContQuint">
    <div>Here Image 5</div>
  </div>
</div>

Solution using inline and block elements 

.AllCont {
  display: block;
  border-collapse : collapse;
  width: 100%;
}
.ContQuint {
  display: inline-block;
    width: 200px;
}
<div class="AllCont">
  <div class="ContQuint">
    <div>Here Image 1</div>
  </div>
  <div class="ContQuint">
    <div>Here Image 2</div>
  </div>
  <div class="ContQuint">
    <div>Here Image 3</div>
  </div>
  <div class="ContQuint">
    <div>Here Image 4</div>
  </div>
  <div class="ContQuint">
    <div>Here Image 5</div>
  </div>
</div>

Hope this helps :)

Upvotes: 2

StefanBob
StefanBob

Reputation: 5128

Flexbox does this with flex-wrap: wrap;

.AllCont {
  display: flex;
  flex-wrap: wrap;
}
.ContQuint {

}
<div class="AllCont">
  <div class="ContQuint">
    <div>Here Image 1</div>
  </div>
  <div class="ContQuint">
    <div>Here Image 2</div>
  </div>
  <div class="ContQuint">
    <div>Here Image 3</div>
  </div>
  <div class="ContQuint">
    <div>Here Image 4</div>
  </div>
  <div class="ContQuint">
    <div>Here Image 5</div>
  </div>
</div>

Upvotes: 1

Franklin Pious
Franklin Pious

Reputation: 3858

Rather than giving a % width for .ContQuint, give a fixed width. otherwise the width reduces with screen width.

fiddle showing it

.ContQuint {
  display: inline-block;
  width: 150px;
}

Upvotes: 1

Clara B
Clara B

Reputation: 461

I think what you're looking for is display: inline-block;! Plus display: block on the parent .AllCont element. Tables used to be useful for this kind of layout, but these days you'll have a better time checking flexbox (or even CSS grid) for something more sophisticated.

Upvotes: 3

Related Questions