This is a second pass at the desire to make my pages render in the way that I want on all devices. My design cannot be simpler, all I wanted was a .css that rendered on a Smartphone with a menu and text that was 100% screen width and for both Tablet and dektop I wanted the right-hand-side to use the maximum of space and to dynamically adjust to the rght of a fixed 200px menu on the left of the screen.
My original design, with a single break-point, had the effect to rendering strangely on an iPad in portrait mode. The right content displayed below the 200px left menu.
However, experimenting with 2 breakpoints I still seem to get a situation where the % width "fights" with the fixed left menu for certain screen widths. both 75-80% at above 800px and 65% over 500px and below 800px seem to cause strange wrapping. 500px for the Mobile Phone respoluton seems to be determined by Googles Mobile Friendly test, as if I set this to 400px the phone menu is still 200px in the result of the test.
I may need 3 or more breakpoints. I still need to do more work on this, at least the pages on .me.uk seem to render on an iPad in portrait better than the .ca site.
It seems that between 850 and 900px 65% width is too wide. A third breakpoint with a width of 550px seems to look better.
Now the rendering on an iPhone 4, in landscape mode, wraps badly. This time for resolutions of 700 to 800px a width of 300px seems to work. However, this all illustrates the difficulties in designing for multiple screen sizes over a range of Internet capable devices.