The content area of my blog was designed to always be 600 pixels wide, unless the browser window fell below 650 pixels wide (600 pixels plus 25 pixel margins either side). Once below this point the content area should change to auto width to fill the browser window (with margins). Then I have another breakpoint to reduce the horizontal margins to only 10px when the display width falls below 620 pixels.
I also wanted anyone browsing full size on a 1920 by 1080 pixel monitor to make more use of all the available space. So I decided to have the comments element positioned to the right of the main content area at display widths above 1890 pixels.
To accomplish the changes at the maximum width of 650 pixels and the minimum width of 1890 pixels I used my Cross-browser responsive design without media queries jQuery to apply different classes to the BODY element at these breakpoints.
This type of design is a simple way of doing effective responsive design without resorting to a more complex grid based layout. Basically my design uses fixed width building blocks which only become fluid when the browser width falls below the standard width of the main content area. To sum up here are some tips:
* Create fixed width elements
* Use CSS floats to position these items
* Add a media query (or equivalent) to change to fluid widths once the width falls below the width of your main content
Also in use is my Image resizing solution for Responsive Design which uses jQuery and server-side image resizing to request the correct sized image from the server for the current browser window size.
by John Avis | May 6, 2020
If you are having intermittent problems sending email in .NET using System.Net.Mail consider switching libraries.
by John Avis | November 4, 2019
As support ends for Microsoft Windows Server 2008 I have recently gone through migrating some websites to a new server running Windows Server 2016 and IIS 10 but some of the websites did not work.
by John Avis | October 15, 2019
For a website project I needed a way to enter multiple tags. I just wanted something simple that I could easily modify to suit my own needs, so I wrote my own.