The web-site www.rolleigraphy.org is adapted for tablets and smartphones. For some pages ‘landscape format’ is advised when using a smartphone. Tables etc will not fit in ‘portrait’ in any sensible way.
The width of the so called viewport is set for the width of your device. I have introduced two breakpoints for the viewport. For viewports wider than 1100 px the lay-out is still as usual for computer screens. For viewports narrower than 1100 px the line height of some page elements is increased. The navigation bar and the Contents section for instance. The intention is to give tablet users more room for touching the desired link.
When the viewport is narrower than 768 px more changes take place. The Contents section changes into just one column instead of three. Images will be placed between paragraphs instead of being wrapped inside paragraphs. Some elements that were aligned to the right are moved to the left.
There are so many devices now, with so many screen sizes, that it is difficult to determine proper breakpoints and impractical to test all devices myself. I have tested the lay-out on my MacBook Pro, my wife's iPad and on our iPhones. When you are on a PC or notebook you can see what is happening by changing the width of the browser window. The next page - Rolleigraphy: Photography with a Rolleiflex - will show it all nicely.
/index.php V.576 Made with TextEdit. HTML5 PHP CSS3