CSS column responsive design

Question

I have a sidebar that i need to be responsive depending on the viewport. Here is how it looks

I was wondering if there was a way to write one piece of code and some css without having to write different html for every device.

Here is what I wrote so far for desktop view

<div class="mycontainer">
    <div>
        <p>A</p>
        <p>B</p>
    </div>
        <div>C</div>
        <div>D</div>
    </div>
    <div>E</div>
    <div>F</div>
    <div>
        <p>G</p>
        <p>H</p>
    </div>
</div>

the css:

.mycontainer{
  width:194px; 
  height:291px; 
  border-radius: 8px; 
  box-shadow: 0px 3px 6px #00000029; 
  margin-left: 30px;
  background: #FFF; 
  z-index:100;
}
.mycontainer div{
  border-bottom:  1px solid #E5E5E5;
  text-align: center;
}

.mycontainer div:first-child, .mycontainer div:nth-child(2){
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 10px 0;
}

.mycontainer div:nth-child(3), .mycontainer div:nth-child(4){
  display: flex;
  flex-direction: row;
  align-items: center;
  
}
.mycontainer div:nth-child(5){
  border:  none;
}

Any help would be appreciated

https://stackoverflow.com/questions/42946454/make-a-div-span-two-rows-in-a-grid — Paulie_D, Jul 25 '21 at 14:43
why are a,b,g,h in paragraph and c,d,e,f are in divs? also, a,b are paragraphs. there is no separation in your table. c,d are divs. no separation for them too. what is the whole point? e,f are divs you separated them in your table. very unclear dude. — sravanTG, Jul 25 '21 at 14:48
also, every element is with white background color in your css. can`t see the difference between two divs. correct your post first. — sravanTG, Jul 25 '21 at 14:50

Nikola Pavicevic · Accepted Answer · 2021-07-25T19:37:26.403

One of the ways is with media queries and css grid

.mycontainer{
  width:194px; 
  height:291px; 
  border-radius: 8px; 
  box-shadow: 0px 3px 6px #00000029; 
  margin-left: 30px;
  background: #FFF; 
  z-index:100;
  display: grid;
  justify-items: center;
  align-items: center;
}
.ef {
  justify-self: left;
}
@media (max-width:801px) { 
  .mycontainer{
    grid-template-columns: auto auto;
  }
  .ab, .cd, .ef, .gh {
    display: flex;
  }
  .ef {
    justify-self: center;
  }
}
@media (max-width:481px)  { 
  .mycontainer{
    grid-template-columns: auto auto;
  }
  .ab {
    display: grid;
  }
  .cd, .gh {
    display: flex;
  }
  .ef {
    justify-self: center;
    grid-area: 2 / 1 / 3 / 3;
  }
  .gh {
     grid-area: 3 / 1 / 4 / 3;
  }
}

<div class="mycontainer">
    <div class="ab">
      <p>A</p>
      <p>B</p>
    </div>
    <div class="cd">
      <div>C</div>
      <div>D</div>
    </div>
    <div class="ef">
      <div>E</div>
      <div>F</div>
    </div>
    <div class="gh">
      <p>G</p>
      <p>H</p>
    </div>
</div>

am very impressed. I did not realize that grids could do the trick. There is only one little problem. In phone view, I need EF to be on one row, and GH on another. With your actual code, I get them both in one row. I have been trying to fix that, but to no avail. Do you see how this can be done? Thanks — Sofia Lazrak, Jul 25 '21 at 18:53

CSS column responsive design

1 Answers1