Social proof section, achieving both responsive design and zooming.

What challenges did you encounter, and how did you overcome them?

This challenge had me thinking for a while. I zoom in a lot when browsing the web, so using viewport dimensions, or percentages on outside boxes was a no go for me. If you are not familiar with this, think of this example:

As zooming in stretches every pixel by the zooming ratio, if you have a width: 250px on an element, and you do 200% zoom, the width will be 500px on the screen. However if you were to use width: 50% on an element, after you do 200% zoom, even though the element will shrink in pixel size, it will still take 50% width space in the screen.

So, to allow zooming, I set every outside box's dimensions with pixels. And proceeded to use media queries with html { zoom: x } to achieve something similar to vw, vh or %'s to make sure the website works on different dimensions of viewports.