A Micro Micro CMS

Responsive web pages

Responsive web pages adjust to the size of the screen they are displayed on. Typically they adjust from desktop to mobile screens by means of 'breakpoints' applied to their stylesheets. Different styles apply to make them display properly with, for example, no side scrolling and everything collapsed into a single column on mobiles. Often, with complex page layouts there are many breakpoints that kick in progressively as the screen width reduces or increases. superMicro CMS has only one primary breakpoint aimed to separate styles for desktop computers and styles for mobile devices.

The rest of this page relates to the default theme for superMicro CMS. The 'Mini' theme (introduced August 2020) is slightly different but just as 'responsive'.

For desktop computers

superMicro CMS has only one column on all screen sizes. The content column width is a fixed 740 pixels on a desktop computer with a screen width of 798 pixels and over. This gives side margins of at least 20 pixels plus an allowance for a vertical scrollbar. As the screen goes wider, the side margins increase with the content column centred.

For mobile devices

When the screen width is 797 pixels or less the width of the content column reduces progressively and everything adjusts accordingly – not just text but images and video as well, and the top navigation menu collapses progressively. The side margins normally remain the same 20 pixels.

The side margins on desktops are maintained by the breakpoint ocurring before the screen reduces to 740 pixels. On mobiles the margins are written in to the styles for paragraphs and lists.

The active stylesheets (default 'White' theme)

The active stylesheets ('Mini' theme)

extra.css

Styles written in extra.css can contain the same breakpoint or not use breakpoints at all:

@media screen and (min-width: 798px) {
  desktop styles (fixed-width)
}

@media screen and (max-width: 797px) {
  mobile styles (collapsible width)
}

element style {
  common styles (all screen sizes)
}

Note: when superMicro CMS is first installed extra.css contains no styles. They can be added in Admin / pages.

There is no universal significance to 798/797 pixels as a breakpoint. I have chosen it only to suit the 740 pixel-wide column. In addition, 'desktop' and 'mobile' are characterisations. Some tablets may straddle both.

Images and video

The maximum width of an image is normally 740 pixels. It will remain 740 pixels wide as long as the screen width is 798 pixels or more.

On screen widths of 797 pixels or less it will narrow progressively, normally with the standard side margins of 20 pixels. The maximum width is 100% (within the 20 pixel side margins). If the image is narrower than the available (100%) its width will be its actual width in pixels and it will be centred.

Since the system creates a new paragraph below every blank line (except with lists) it means if a blank line starts with an image it becomes contained in a paragraph and will normally have 20 pixel side margins standard for paragraphs.

That is normally. There is a paragraph class "w" which has no side margins. It can be used to extend an image full-width if necessary (see the following):

<p class="w"><img src="img/filename.jpg" width="xxx" height="xxx" alt=""></p>

The HTML markup for video will not generate paragraphs. That means on screen widths of 797 pixels or less, video extends full-width if its 'physical' width or specified pixel width is wide enough to do so.

From 14th July 2020 there is provision built-in to the stylesheets to extend images (including slideshows) and video wider than 740 pixels on desktop computers with a screen width of 798 pixels or more, up to 1200 pixels wide. I have described it on my personal website. See CSS blocks wider than the containing column »

Page last modified: 23 August, 2020