Site Map Mara Editing Advanced Step by step
print

The Theme - Step by Step

A responsive banner

OK, so we've made a banner and it behaves quite nicely on a range of screen (or more properly, browser window) sizes. The proper term for this is viewport size, by the way - the available space in the browser for displaying the page, when other features like the browser's own menu have been taken into account. 

If you try shrinking the window containing the sample though, you'll note that at widths less than that of the banner logo (which is 500 pixels) the logo is cropped at the RHS.  This looks bad.  We need to take mobile phone users into account, and although our logo would display well on a phone in landscape mode, it portrait mode it might not. 400px by 800px is a common screen size for the smaller phones, so it's a good minimum to work to. 

There are various approaches to this. We could make the image always fit the banner by using the background-size: contain css.  However, the problem with this is that images containing text tend to go fuzzy if you allow then to resize. So while it might be OK in some cases, with the logo we're using here it would not be.

An better approach is to create two or more copies of the logo at different sizes. Here we've made an additional 250px banner image. We'll now use @media conditional css to apply the smaller version of the banner on, well, on small screens. First we have the normal banner css:

#cms_banner {
  background: url('maralogo500.png');
  background-repeat:no-repeat;
  background-position:center center;
  background-color: blue;
  color:white;
  background-size: auto;
  min-height: 140px;
}

Then below we add this conditional ruleset:

@media screen and (max-width:550px) {
  #cms_banner {
    background: url('maralogo250.png');
    background-repeat:no-repeat;
    background-position:center center;
    background-color: blue;
    min-height: 70px;
 }
}

Multiple css items for the same content zone are applied in the order in which they are encountered. The upper section will always apply. The lower will only apply if the viewport is less than 550px wide.

In principle, css rules work from first to last so you don't need to repeat all of the rules already stated in the first section. However, declaring a new background URL knocks-out the rules determining how that background will be displayed, so we do have to repeat the background rules. So, css rules are in most cases inherited, but background-related settings are lost whenever a new background is set. If you think this doesn't make sense.... then join the club. However, that's the way it is. 

We also reduce the height of the banner to 70px so as to not leave a lot of blank space around it. 

The other advantage of doing things this way is that the mobile data user is only faced with a much smaller download, the small images being about 5kB  whereas the larger is 12kB.  Using background resizing, the mobile user is always faced with the large-screen download.

Two sizes are enough for most purposes, but if we wanted to add a really large banner for the sake of the power user with a massive display, then we would use this css:

@media screen and (min-width:1200px) {
  #cms_banner {
    background: url('maralogo1000.png');
    background-repeat:no-repeat;
    background-position:center center;
    background-color: blue;
    min-height: 280px;
 }
}

The key point is the use of min-width instead of max-width.

Some authorities reckon that you should start with the smallest size as the default, and use min-width statements to cater for larger screens. I don't know about you, but I design sites for desktop computers and then make the adjustments needed for phone users. The site isn't going to be all that pretty on a phone anyway, because of the limitations of that platform. Provided it's readable on a phone, that's the main thing. So to me it makes more sense to show off your artwork to  best advantage in the place where it can be appreciated.