Sun Dial Menu
Menu W3C.css Images

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.

Belchamp Walter SEO Services

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.

This banner will not be seen on a mobile display

This page is part of an on-going research project on the history of Belchamp Walter and the manor of Belchamp Walter. If you have found it making a web search looking for geneological or other information on the village then please bookmark this page and return often as I am likely to make regular updates. If you delve deeper into this website you will find many other pages similar to this one.

Wrapping text around images

This still needs work. My page on heraldry shows this.

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.



  • W3 CSS - 🔗 - on the W3C Schools website

Site design by Tempusfugit Web Design -