W3 Responsive Classes
My earlier pages were too specific to the analysis of the w3-template, the Portfolio Template
As an extension of my template design what I wanted to do was to expand the layout to incorporate split main screen into two, three and four sections that are responsive.
This page will attempt to discuss the responsive nature of this site and other designs using the W3C.css library. The W3C.css library is designed to be "responsive out of the box". The templates provided by W3C are also responsive and I started with a modification of the Portfolio Template. Since the start I have changed that template considerably and while it is essentially the same design I have added a LOT more!
With any luck there will be some interest in some of my other designs as I now have a Village News page and I am starting to prototype a page for a village event. The "Friends" project still seems to be on the "back-burner" and I don't expect any feedback or content any time soon.
At the same time as the development of this website in general I am stepping up my usage of Google Analytics 4 and new ventures will be using this in preference to Universal Analytics. The monitoring of any new pages and ventures will be monitored via the tempusfugit website.
The W3 Classes that I am pursuing now are those that I maybe using but not that aware. The Portfolio Template started off with the w3-third class grid of images. I adopted this for the Parish Council site but I scaled it back as I wanted the PC site to look different from this website.
I started off this in looking at the w3-col class, in this case w3-col m6
How this displays on a mobile phone is the key
From what I can see if the class w3-col m6 is the same as w3-half
How this displays on a mobile phone is the key
The problem of "Wrapping" text around images and othe page content
This is text in the left half of the screen.
I also added a border, but I am not sure I like the effect
How this displays on a mobile phone is the key
Newpaper Format
First a 50:50 split. (Two columns)
This is text in the left half of the screen. It should wrap within its own div. I will have to see how this looks with text on the right
I can split with paragraphs as well.
This is text in the right half of the screen.
Three Newpaper columns
This is text in the left half of the screen. It should wrap within its own div. I will have to see how this looks with text on the right
I can split with paragraphs as well.
This is text in the middle of the screen. Again the text should wrap as required and paragraphs added as needed.
This is text in the right half of the screen.