making div responsive and styling it for displaying news

Question

If I have two div s next to each other. How can I make them go under each other when resizing the browser? So far I found this example on stackoverflow, which is two divs beside each other. How can I make them under each other on browser resize?

#parent {
  display: flex;
}

#narrow {
  width: 200px;
  background: lightblue;
  /* Just so it's visible */
}

#wide {
  flex: 1;
  /* Grow to rest of container */
  background: lightgreen;
  /* Just so it's visible */
}

<div id="parent">
  <div id="wide">Wide (rest of width)</div>
  <div id="narrow">Narrow (200px)</div>
</div>

Possible duplicate of [CSS flex, how to display one item on first line and two on the next line](https://stackoverflow.com/questions/26086515/css-flex-how-to-display-one-item-on-first-line-and-two-on-the-next-line) — Veena K. Suresh, Nov 07 '17 at 10:09

Temani Afif · Accepted Answer · 2017-11-07T10:13:24.360

You can simply use media query like this :

#parent {
  display: flex;
}

#narrow {
  width: 200px;
  background: lightblue;
  /* Just so it's visible */
}

#wide {
  flex: 1;
  /* Grow to rest of container */
  background: lightgreen;
  /* Just so it's visible */
}

@media all and (max-width:800px) {
  #wide,
  #narrow {
    flex: 0 0 100%;
  }
  #parent {
    flex-wrap: wrap;
  }
}

<div id="parent">
  <div id="wide">Wide (rest of width)</div>
  <div id="narrow">Narrow (200px)</div>
</div>

Simply change the value 800px with what you need (i use it to show result here)

making div responsive and styling it for displaying news

1 Answers1