The consistant display of images on a page

This is made much easier using the W3.css Framework. However, I always seem to forget the syntax.

The best way to remind myself of the syntax is to look at the source of this page.

Scaled images - to screen-size

Just using the standard W3C.css div with a fixed max-width tends to make the image too small on a mobile screen.

For example, the image above contains a screen shot of a search result, this is not easily viewed on a mobie screen. Although the max-width is 75% it can be programmed to be 95% or more.

Some pages are not even meant to displayed to the same on a mobile device. This is especially the case when an image is displayed. In this case it may be an ideal to display a different image when the page is viewed on a mobile device. An example of this is the Chancel of the Church.

Conditional Banners - w.r.t. screen-size

This also applies to banners. I did try a scalable banner but decided not to use it as it "junked-up" the screen.

However, the "History Project" banner need not be displayed on a mobile screen.

Wrapping text around images

This still needs work. My page on heraldry did show this until I fixed it.

If you search for solutions of how to do this then there is the veritable "Rabbit Hole". As this technique has been around for a while there is much conflicting information.

The example on my Heraldry page actually works quite well. However, this breaks down on a small screen as the wrapped text does not play well with the image. The image can be made responsive in its own right but the layout needs to be fundamentally different on a small screen.