[Solved] Simplest way to create a resizable layout such as the one on apple’s website? [closed]

by


You are looking for media queries Here is a really quick example I have put together. Click the “Full page” to play around with it and see how it works.

This is based on your updated question with the code snippet. I basically added the px to your media queries, and used max-width instead of a combination of max-width and min-width.

#mainDiv {
  background-color: red;
  width: 100%;
  height: 200px;
}
#fourDivWrapper {
    font-size: 0px; /* A hack to prevent the space between */
}
#fourDivWrapper div {
    font-size: 14px;
}
#div1 {
  background-color: blue;
  display: inline-block;
  width: 25%;
  height: 200px;
}
#div2 {
  background-color: green;
  display: inline-block;
  width: 25%;
  height: 200px;
}
#div3 {
  background-color: yellow;
  display: inline-block;
  width: 25%;
  height: 200px;
}
#div4 {
  background-color: purple;
  display: inline-block;
  width: 25%;
  height: 200px;
}

@media only screen and (max-width: 1067px){
  #div1 {
    background-color: blue;
    display: inline-block;
    width: 50%;
    height: 200px;
  }
  #div2 {
    background-color: green;
    display: inline-block;
    width: 50%;
    height: 200px;
  }
  #div3 {
    background-color: yellow;
    display: inline-block;
    width: 50%;
    height: 200px;
  }
  #div4 {
    background-color: purple;
    display: inline-block;
    width: 50%;
    height: 200px;
  }
}

@media only screen and (max-width: 734px){
  #div1 {
    background-color: blue;
    display: inline-block;
    width: 100%;
    height: 200px;
  }
  #div2 {
    background-color: green;
    display: inline-block;
    width: 100%;
    height: 200px;
  }
  #div3 {
    background-color: yellow;
    display: inline-block;
    width: 100%;
    height: 200px;
  }
  #div4 {
    background-color: purple;
    display: inline-block;
    width: 100%;
    height: 200px;
  }
}
<div id="mainDiv">Main div</div>

<div id="fourDivWrapper">
    <div id="div1">div 1</div>
    <div id="div2">div 2</div>
    <div id="div3">div 3</div>
    <div id="div4">div 4</div>
</div>

And here is the original answer:

html, body {
  margin: 0;
}

.column {
  float: left;
  width: 25%;
  height: 100px;
  box-sizing: border-box;
  border: 1px solid black;
}

@media (max-width: 1200px) {
  .column {
    width: 50%;
  }
}

@media (max-width: 720px) {
  .column {
    width: 100%;
  }
}
<div class="wrapper">
    <div class="column">a</div>
    <div class="column">b</div>
    <div class="column">c</div>
    <div class="column">d</div>
</div>

2

solved Simplest way to create a resizable layout such as the one on apple’s website? [closed]