SystemicPlural SystemicPlural - 22 days ago 6
HTML Question

How do I responsively shrink white space between elements in a row

Given the design below where the green bits are white space that can resize and the mountains are fixed size images that can not change size. How can I code this so that it will responsively resize (no javascript).

enter image description here

The initial widths of both the white space and the images are all different.

The green spaces need to scale down proportionally so that when one green space is 50% of its origional width all green spaces are 50% of their origional width.

Not use a flexbox. Needs further back compatability.

This is what it would look like after half the green space has gone.

enter image description here

Answer

Consider giving each image its own %-based margin-right after declaring its width:

div {
white-space:nowrap;
}

img {
height: 120px;
}

img:nth-of-type(1) {
width: 126px;
margin-left:3%;
margin-right:2%;
}

img:nth-of-type(2) {
width: 168px;
margin-right:1%;
}

img:nth-of-type(3) {
width: 84px;
margin-right:6%;
}

img:nth-of-type(4) {
width: 28px;
margin-right:3%;
}

img:nth-of-type(5) {
width: 42px;
margin-right:2%;
}
<div>
<img src="https://images.pexels.com/photos/29426/pexels-photo-29426.jpg" alt="Mountains" />
<img src="https://images.pexels.com/photos/29426/pexels-photo-29426.jpg" alt="Mountains" />
<img src="https://images.pexels.com/photos/29426/pexels-photo-29426.jpg" alt="Mountains" />
<img src="https://images.pexels.com/photos/29426/pexels-photo-29426.jpg" alt="Mountains" />
<img src="https://images.pexels.com/photos/29426/pexels-photo-29426.jpg" alt="Mountains" />
</div>


N.B. I was initially going to suggest using CSS viewport width units (vw) rather than %.

But I see MDN states:

Only Gecko-based browsers are updating the viewport values dynamically, when the size of the viewport is modified (by modifying the size of the window on a desktop computer or by turning the device on a phone or a tablet).

See: http://developer.mozilla.org/en/docs/Web/CSS/length#Viewport-percentage_lengths