Stylesheet break points
The pages of a website must adjust to the width of the screen they are displayed on so that they stay easily readable with no horizontal scrollbar. This is done by using media queries to define different styles for different browser screen width, eg: styles for min-width break points and other styles for max-width break points.
superMicro CMS is a centred single-column design with two main stylesheets: default.css for desktop computer screens and mobile.css for mobile devices.
default.css (min-width: 798px)
798 is 740px column + 20px minimum side margins + 18px scrollbar
- (min-width: 1028px) / p#sitename is visible.
- (max-width: 1027px) / p#sitename is hidden.
- (min-width: 1257px) / .w1200 .slideshow-container img is max-width 1200px (+57px being 2 margins plus scrollbar)
- (max-width: 1256px) and (min-width: 1081px) / .w1200 .slideshow-container img is max-width 1024px (+57px)
- (max-width: 1080px) and (min-width: 917px) / .w1200 .slideshow-container img is max-width 860px (+57px)
- (max-width: 916px) and (min-width: 798px) / .w1200 .slideshow-container img is max-width 740px (+58px - WHY?)
- (min-width: 1257px) / .w1200 is width 1200px with left margin -230px (*) / .w1200 video is max-width 1200px (WHY?)
- (max-width: 1256px) and (min-width: 1081px) / .w1200 is width 1024px with left margin -142px / .w1200 video is max-width 1024px
- (max-width: 1080px) and (min-width: 917px) / .w1200 is width 860px with left margin -60px / .w1200 video is max-width 860px
- (max-width: 916px) and (min-width: 798px / .w1200 video is max-width 740px
The idea of class="w1200" is to break out of the 740px wide column the div is in in order to display something wider but centred.
*Explanation
This containing column is 740 pixels wide on screens wide enough for it (798px). The wider blocks (mainly for images but can be text) are up to 1200 pixels wide and remain centred on the narrower containing column. This is done by using a negative left margin equal to half the width of the wider block (1200px) minus half the width of the containing column (740px). Div class="w1200" is also position: relative and text-align: center.
For example, 600 pixels (half of 1200px) minus 370 pixels (half of 740px) = 230 pixels (left margin = minus 230px when screen is at least 1256 pixels wide). In other words, the left hand edge of w1200 is 230 pixels to the left of the main 740px wide column - the same as the right hand edges.
When the screen width is reduced to 1256 pixels, a break point kicks in to reduce the maximum width of an image to 1024 pixels, and with it the width of w1200. And so on, until a different stylesheet altogether kicks in at 797 pixels in width.
The break points are 'stepped' because the -230px left margin for 1200 wide can't adjust itself down with the browser window. It can only be adjusted with another break point, in this case for image widths of 1024 and 860 pixels.
mobile.css (max-width: 797px)
The top changes a bit. The site name is always visible and fixed at the top, nav scrolls up underneath it. The website is mostly a single column div so most of the rest is sizing and spacings with no div movement.
- (min-width: 641px) [over 640px up to 797px] / font size, line height, side paddings, side margins, form.
- (max-width: 640px) / font size and line height.
- (max-width: 617px) / boxlist adjusted.
The Video lozenge .tv div has various adjustments.Not worth bothering with.
The website's main break point is 797/798px, dictated by having a main central column 740 pixels in width. Even 740 is a bit wide for readability of text but it's good for images. 740 can be reduced to 600 (on and off) with the 'section' element.
W3schools says (max-width: 768px) for mobile devices - anything less than 769 pixels wide, which means a 740 pixel wide image could have only 6px side margins. superMicro CMS seems fine to me - anything less than 798 pixels wide means the transition down occurs only 30 pixels sooner (6px side margins to 20px side margins).
You last viewed: cms-passwords | cms-htaccess | cms-extras
