How to evenly split one row of divs into two rows at certain browser width

Question

Below I provided a jsfiddle to illustrate my problem:

https://jsfiddle.net/1vf8wgeu/

I have one row of 12 'divs' (actually links but look and behave as divs). Each of the 12 divs has a color and a set width in percentages, and this row stretches 100% of the screen width.

At a certain screen width however, these divs become too small. How do I, at a certain screen width (let's say 700px), have this row become two rows, 6 on the top row and 6 on the bottom row? The problem is that the two rows must still each have a width of 100% and the divs themselves must be double the width (since they will be occupying two rows).

I tried reformatting the HTML and using white-space: pre with the media query but this leaves the problem of the rows/divs not stretching 100%, and a gap in the middle of the row and the media query is not active.

Any solution is greatly appreciated thank you.

Here shown is the problem of the boxes not stretching 100% width

Answer 1

You can try this jsfiddle. The elements are distributed in two div containers, which are on the same row or on two differents rows, depending on the width of the page.

The code, shown below, accounts for these conditions set in the question:

• The individual anchor elements have different widths
• On one line or two lines, the elements fill the whole page width
• When grouped on one line, the two parts don't necessarily occupy half of the width (in the example below, the first part takes 55% of the width, the second takes 45%)

---

HTML

<div class="container">
    <div class="div1">
    <a></a><a></a><a></a><a></a><a></a><a></a>
    </div><div class="div2">
    <a></a><a></a><a></a><a></a><a></a><a></a>
    </div>
</div>

CSS

div.container {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

div.container > div {
    display: inline-block;
    width: 100%;
}

@media (min-width: 500px) {
    div.container > div.div1 {
        width: 55%;
    }
    div.container > div.div2 {
        width: 45%;
    }
}

div a {
    height: 50px;
    display: inline-block;
    vertical-align: top;
}


/*widths and colors*/

.div1 > a:nth-of-type(1) {
    width: 24%;
    background-color: red;
}

.div1 > a:nth-of-type(2) {
    width: 13%;
    background-color: hsl(20, 100%, 60%);
}

.div1 > a:nth-of-type(3) {
    width: 13%;
    background-color: hsl(40, 100%, 75%);
}

.div1 > a:nth-of-type(4) {
    width: 10%;
    background-color: hsl(60, 100%, 60%);
}

.div1 > a:nth-of-type(5) {
    width: 27%;
    background-color: hsl(80, 100%, 65%);
}

.div1 > a:nth-of-type(6) {
    width: 13%;
    background-color: hsl(100, 100%, 60%);
}

.div2 > a:nth-of-type(1) {
    width: 23%;
    background-color: hsl(260, 100%, 75%);
}

.div2 > a:nth-of-type(2) {
    width: 23%;
    background-color: hsl(140, 100%, 60%);
}

.div2 > a:nth-of-type(3) {
    width: 10%;
    background-color: hsl(160, 100%, 75%);
}

.div2 > a:nth-of-type(4) {
    width: 15%;
    background-color: hsl(180, 100%, 60%);
}

.div2 > a:nth-of-type(5) {
    width: 10%;
    background-color: hsl(200, 100%, 75%);
}

.div2 > a:nth-of-type(6) {
    width: 19%;
    background-color: hsl(220, 100%, 60%);
}

Answer 2

You could use flexbox. By splitting the anchors into two groups, here's what I came up with. Note, I did fudge a percentage to get it to work, so it doesn't quite match your original widths.

HTML

<div class="main">
  <aside class="first">
    <a></a><a></a><a></a><a></a><a></a><a></a>
  </aside>
  <aside class="second">
    <a></a><a></a><a></a><a></a><a></a><a></a>
  </aside>
</div>

CSS

div.main {
  display: flex;
  flex-direction: column;
  width: 100%;
}

aside {
  display: flex;
  flex-direction: row;
  width: 100%;
}

aside a {
  height: 50px;
  display: flex;
}

/*widths and colors*/

.first a:nth-child(1) {
  width: calc(12% *2);
  background-color: hsl(65, 100%, 75%);
}

.first a:nth-child(2) {
  width: calc(7% * 2);
  background-color: hsl(20, 100%, 60%);
}

.first a:nth-child(3) {
  width: calc(7% * 2);
  background-color: hsl(40, 100%, 75%);
}

.first a:nth-child(4) {
  width: calc(5% *2);
  background-color: hsl(60, 100%, 60%);
}

.first a:nth-child(5) {
  width: calc(14% *2);
  background-color: hsl(80, 100%, 65%);
}

.first a:nth-child(6) {
  width: calc(7% * 2);
  background-color: hsl(100, 100%, 60%);
}

.second a:nth-child(1) {
  width: calc(11% * 2);
  background-color: hsl(260, 100%, 75%);
}

.second a:nth-child(2) {
  width: calc(11% * 2);
  background-color: hsl(140, 100%, 60%);
}

.second a:nth-child(3) {
  width: calc(5% * 2);
  background-color: hsl(160, 100%, 75%);
}

.second a:nth-child(4) {
  width: calc(7% * 2);
  background-color: hsl(180, 100%, 60%);
}

.second a:nth-child(5) {
  width: calc(5% * 2);
  background-color: hsl(200, 100%, 75%);
}

.second a:nth-child(6) {
  width: calc(11% * 2);
  background-color: hsl(220, 100%, 60%);
}

/* Desktops and laptops ----------- */
@media only screen
and (min-width : 600px) {
  div.main {
    flex-direction: row;
  }
}

DEMO

Answer 3

Here's the best I could come up with. I used a media query to change a <b></b> tag in the middle of all the <a></a> tags. I also changed all the percentages of the initial <a> tags in the style sheet to make them all even sizes...

<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        @media only screen and (max-width: 700px) {
            body {
                background-color: lightblue;
            }
            b {
                display:block;
            }
            a {
                width: 16.66% !important;
            }
       }

        aside {
            width: 100%;
            position: absolute;
            top: 0;
            left: 0;
        }

            aside a {
                height: 150px;
                display: inline-block;
                vertical-align: top;
            }

        /*widths and colors*/
        a:nth-of-type(1) {
            width: 8.33%;
            background-color: hsl(0,100%,75%);
        }

        a:nth-of-type(2) {
            width: 8.33%;
            background-color: hsl(20,100%,60%);
        }

        a:nth-of-type(3) {
            width: 8.33%;
            background-color: hsl(40,100%,75%);
        }

        a:nth-of-type(4) {
            width: 8.33%;
            background-color: hsl(60,100%,60%);
        }

        a:nth-of-type(5) {
            width: 8.33%;
            background-color: hsl(80,100%,65%);
        }

        a:nth-of-type(6) {
            width: 8.33%;
            background-color: hsl(100,100%,60%);
        }

        a:nth-of-type(7) {
            width: 8.33%;
            background-color: hsl(260,100%,75%);
        }

        a:nth-of-type(8) {
            width: 8.33%;
            background-color: hsl(140,100%,60%);
        }

        a:nth-of-type(9) {
            width: 8.33%;
            background-color: hsl(160,100%,75%);
        }

        a:nth-of-type(10) {
            width: 8.33%;
            background-color: hsl(180,100%,60%);
        }

        a:nth-of-type(11) {
            width: 8.33%;
            background-color: hsl(200,100%,75%);
        }

        a:nth-of-type(12) {
            width: 8.33%;
            background-color: hsl(220,100%,60%);
        }
    </style></head>
<body>
    <aside><a></a><a></a><a></a><a></a><a></a><a></a><b></b><a></a><a></a><a></a><a></a><a></a><a></a></aside>
</body>
</html>