How can I prevent images from shifting in CSS?

Mostly written from scratch.

Caveats and disclaimers…

This code will work in modern browsers only.

Scaling of text and most padding is accomplished with the vw unit of measure.
Column widths use percent.

Version 1b mimics the .pdf file.
Images and text resize to fit the width of the window.

Version 1c crops the bottom of the mountain image in wide viewports so the nav menu does not drop below the bottom of the browser window.

You can zoom the font-size-only larger (Firefox) to simulate how the page might look if the user chooses a font size that is larger than your font size. You will find that all but the bottom soup row will adapt as wished. In the soup row, overflow happens as the font-size increases. Floating the image would allow the text to flow below the image but could not be vertically centered at normal sizes as it is now.

The almost ideally magic combination of image aspect ratios and the quantity of text permit this layout.

It has been tested successfully on a PC with Firefox and Chrome.
It has NOT been tested in any version of IE including Edge.
It has not been tested on a Mac.

Surprises/disappointments are possible.

Attached is a file containing: (total size 665 KB unpacked)

  1. module-01-r1b.htm
  2. module-01-r1c.htm
  3. a folder with @coothead’s images (657.7 KB)

This is a link to the same files in Dropbox (not zipped):

Remember, this code mostly mimics the .pdf, as requested. Your challenge is to modify this code (or write something new) to adapt it to a single column mobile view

1 Like