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.

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, which gives a side margin of about 50 pixels allowing for a vertical scrollbar.

When the screen with is less, the pixel width of the content column reduces and everything adjusts accordingly – not just text but images and video as well, and the top navigation menu goes down above the footer. The single breakpoint: anything over 797 pixels is fixed-width and anything less than 798 pixels is collapsible.

extra.css

Styles written in extra.css can be limited as follows:

@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.

Page last modified: 28 January, 2020