CSS double the width of all elements with media query (or jQuery)

Question

Below I have provided a jsfiddle:
https://jsfiddle.net/cLvyydax/

I have a row of 8 divs (rather links that behave as divs) that are of different widths– they all add up to 100%. I have set it up so that when triggered by a media query of 600px width, it splits up into two equal rows, with each row at exactly 50% width. I have done so by inserting <b></b> tags in between the HTML 'divs' and setting it to display: block with the media query.

If every div were the same width, I could easily set the width to double with one single value.
However, being that these divs are of different widths (in percentages), how can I double the width of each div automatically when it splits into the two rows?

I tried by setting the parent/container element to a width of 200%, but this leaves a horizontal scrollbar and half the window blank. I also tried the flex method but this brings other problems with my setup.

How can I do this easily with CSS or Javascript/jQuery?

EDIT: I need a solution to have it done automatically

Result:

Desired Result:

Answer 1

Setting overflow to hidden should hide the scrollbar if the 200% otherwise works for you. You can also set this on the parent to hide the blank space, if I understand that problem correctly.

aside {
  width:200%;
  overflow-x: hidden;
}

Edited:

aside {
   width:200%;
   box-sizing: border-box;
}
div {
    position:relative;
    box-sizing: border-box;
    max-width: 100%;
    overflow-x:hidden;
    min-height: 120px;
}

https://jsfiddle.net/5cz84od0/4

Needs position:relative on parent element and a min-height on the parent element to force the parent element to expand to the same size as the aside . Ah, and I did put the overflow-x on the wrong element the first time - of course on the element that is overflowing won't work! I was thinking about it being the container of the a s...

UPDATE: Fiddle adjusted per comments: https://jsfiddle.net/5cz84od0/6/ Works with just div around aside and a little bit of CSS.

Answer 2

Why not remove b tag and just do this, since you are defining width of each a tag already, just double them.

 aside { width: 100%; position: absolute; top: 0; left: 0; } aside a { height: 50px; 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: 16.66%; 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: 16.66%; background-color: hsl(150,100%,60%);} a:nth-of-type(7) {width: 8.33%; background-color: hsl(260,100%,75%);} a:nth-of-type(8) {width: 24.99%; background-color: hsl(0,100%,80%);} @media only screen and (max-width: 500px) { a:nth-of-type(1) {width: 16.66%; } a:nth-of-type(2) {width: 33.32%; } a:nth-of-type(3) {width: 16.66%; } a:nth-of-type(4) {width: 16.66%; } a:nth-of-type(5) {width: 16.66%; } a:nth-of-type(6) {width: 33.32%; } a:nth-of-type(7) {width: 16.66%; } a:nth-of-type(8) {width: 49.98%; } } 

 <aside><a></a><a></a><a></a><a></a><a></a><a></a><a></a><a></a><a></a><a></a><a></a><a></a></aside> 

Update

Seems like the only way to do it is through jquery, on resize action, when width is <= 500, double the width of each a tag and set trigger to true so it doesn't do it again, when width is > 500, divide current width by 2 and set trigger to false so when width is <= 500, it doubles the width again.

Update 2

Added toFixed(2) to width percentage, so it's a constant double decimal place, otherwise it is a four decimal place width percentage and it changes overtime after serveral resize.

 var minWidthTriggered = false; var maxWidthTriggered = false; $(window).resize(function(){ if ($(window).width() <= 500 && !minWidthTriggered){ minWidthTriggered = true; maxWidthTriggered = true; $("a").each(function(){ widthPercentage = $(this).width() / $(this).parent().width() * 100; $(this).css({ 'width' : widthPercentage.toFixed(2) * 2 + "%" }); }); } else if ($(window).width() > 500 && maxWidthTriggered) { maxWidthTriggered = false; minWidthTriggered = false; $("a").each(function(){ widthPercentage = $(this).width() / $(this).parent().width() * 100; $(this).css({ 'width' : widthPercentage.toFixed(2) / 2 + "%" }); }); } }); 

 aside { width: 100%; position: absolute; top: 0; left: 0; } aside a { height: 50px; 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: 16.66%; 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: 16.66%; background-color: hsl(150,100%,60%);} a:nth-of-type(7) {width: 8.33%; background-color: hsl(260,100%,75%);} a:nth-of-type(8) {width: 24.99%; background-color: hsl(0,100%,80%);} 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script> <aside><a></a><a></a><a></a><a></a><a></a><a></a><a></a><a></a></aside> 

Answer 3

I'm not clear on what you want to happen... but what about this - as a starter?

https://codepen.io/sheriffderek/pen/a88b66fa934e4abbd38e054a45d3f2ff

markup for a list of things... which is what you have.

<ul class='thing-list'>
  <li class='thing one'>
    <a href='' class='link'>.</a>
  </li>
  <li class='thing two'></li>
  <li class='thing three'></li>
  <li class='thing four'></li>
  <li class='thing five'></li>
  <li class='thing six'></li>
  <li class='thing seven'></li>
  <li class='thing eight'></li>
</ul>

I'd highly recommend using Stylus for your CSS - but compiled CSS is below

/* apply a natural box layout model to all elements, but allowing components to change */
html
    box-sizing: border-box
*, *:before, *:after
    box-sizing: inherit

.thing-list
    display: flex
    flex-direction: row
    flex-wrap: wrap
    .thing
        min-height: 90px
        flex-basis: (1/12)*100%
        &.one
            background: hsl(0,100%,75%)
        &.two
            flex-basis: (2/12)*100%
            background: hsl(20,100%,60%)
        &.three
            background: hsl(40,100%,75%)
        &.four
            background: hsl(60,100%,60%)
        &.five
            background: hsl(80,100%,65%)
        &.six
            flex-basis: (2/12)*100%
            background: hsl(150,100%,60%)
        &.seven
            background: hsl(260,100%,75%)
        &.eight
            flex-basis: (3/12)*100%
            background: hsl(0,100%,80%)
        .link
            display: block
            color: inherit
            text-decoration: none
            width: 100%
            min-height: 90px
            // i'd prabably color the link - not the li

    @media (min-width: 600px)
        .thing
            flex-basis: (2/12)*100%
            &.two
                flex-basis: (4/12)*100%
            &.six
                flex-basis: (4/12)*100%
            &.eight
                flex-basis: (6/12)*100%

CSS

/* apply a natural box layout model to all elements, but allowing components to change */
html {
  box-sizing: border-box;
}
*,
*:before,
*:after {
  box-sizing: inherit;
}
.thing-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
.thing-list .thing {
  min-height: 90px;
  -ms-flex-preferred-size: 8.333333333333332%;
      flex-basis: 8.333333333333332%;
}
.thing-list .thing.one {
  background: #ff8080;
}
.thing-list .thing.two {
  -ms-flex-preferred-size: 16.666666666666664%;
      flex-basis: 16.666666666666664%;
  background: #f73;
}
.thing-list .thing.three {
  background: #ffd480;
}
.thing-list .thing.four {
  background: #ff3;
}
.thing-list .thing.five {
  background: #c3ff4d;
}
.thing-list .thing.six {
  -ms-flex-preferred-size: 16.666666666666664%;
      flex-basis: 16.666666666666664%;
  background: #3f9;
}
.thing-list .thing.seven {
  background: #aa80ff;
}
.thing-list .thing.eight {
  -ms-flex-preferred-size: 25%;
      flex-basis: 25%;
  background: #f99;
}
.thing-list .thing .link {
  display: block;
  color: inherit;
  text-decoration: none;
  width: 100%;
  min-height: 90px;
}
@media (min-width: 600px) {
  .thing-list .thing {
    -ms-flex-preferred-size: 16.666666666666664%;
        flex-basis: 16.666666666666664%;
  }
  .thing-list .thing.two {
    -ms-flex-preferred-size: 33.33333333333333%;
        flex-basis: 33.33333333333333%;
  }
  .thing-list .thing.six {
    -ms-flex-preferred-size: 33.33333333333333%;
        flex-basis: 33.33333333333333%;
  }
  .thing-list .thing.eight {
    -ms-flex-preferred-size: 50%;
        flex-basis: 50%;
  }
}