Making object sizes proportional to browser sizes This tutorial introduces you to two very powerfull and sometimes less known CSS features - Viewport units - Calc function Viewport Units allow you to express the size of an element as a percentage of either the width or height of the browser. Calc allows you to not only express a dimension as the result of a specific calculation, but also to mix different units in the same calculation. To illustrate these two features, below are two concrete examples that can take advantage of these features. - Variable/responsive minimum header height - Responsive text  

Variable/responsive minimum header height

Xtreme version 3 introduced the ability to use the header image, not as an actual image object, but as the background image for the whole header area. You can set it to be a simple background image, tiled or covering the whole area, or even better with "Plus" to be used as a Parallax background image. When you do that, the height of the header will be dictated by the other elements present in the header, like Site Title & Tagline, Header widget area, Header HTML. If your header does not use any of these element, its size would be zero, and you would not see the header image as background image. Even if you have some elements in your header like a Title, you may want to increase the height of the header area, for a more dramatic effect of the background image, especially if using a parallax effect. To do that, you can use a Custom CSS Rule placed in the Theme Gloabl CSS Rule box, to set a minimum height for your Header Area. The basic rule to do that with a fixed pixel value would be

#header {min-height:250px;}

But it would mean that regardless of device size, that area will always be as big as 250px which could be overpowering on a phone. You could use Mobile rules to use a different size for each device size as explained in the tutorial below

Styling specific pages or devices (like BG Image)

But it would be more interesting if the area could gradually change size as the browser gets smaller. This is where viewport units can become interesting. There are two viewport units, vw (viewport width) and vh (viewport height). If you want the minimum height of the header to be proportional to the width of the browser you could use

#header {min-height:20vw;}

20vw = 20% of the Viewport Width. If you want it to be proportional to the height of the browser you could use

#header {min-height:30vh;}

But what if you want a more elaborate behavior? This is where the CSS calc function comes into play. if you want a mixed proportion of browser height and width you could use

#header {min-height:calc(10vw + 20vh);}

Note: Beware, you need spaces on each side of math operators in a calc function Because calc lets you mix different units, you could do even more elaborate behavior. Let us say you want an absolute minimum of 200px, but a variable portion above that. You could use

#header {min-height:calc(200px + 10vh);}

As you can see, using a combination of CSS calc and viewport units, you can now define elaborate responsive behavior for object sizes.  

Responsive text

That takes us to our next example. What we described above is a way to do something nothing else can do in CSS, create responsive text. When you use px or em or %, you text never adjusts to browser size. This means that when a piece of text becomes too big for a small screen, you need to create mobile rules to change its size abruptly on these devices. Using the method above, you can now create a variable size text that will behave responsively. A good example is the Site Title and Tagline. If you have a long Title or Tagline, these can end up in multiple lines on mobile. With the above method, you can now make them responsive. Let us say you want a Title that is a minimum of 12px high on phones, but will scale above that to occupy more space on tablet and desktop. you could place a rule like below in the Theme Custom CSS Rule box

#site-title {font-size:calc(12px + 2vw);}

You now have a Title with a responsive size. It will have a minimum font size of 12px, but as the browser gets larger, it will occupy a more meaningful portion of the header area. This can also be useful in tables where incompressible text can prevent a table from scaling down. Making the text size responsive can allow it to become smaller as the browser get smaller, allowing the table to scale down further instead of getting cropped. Note: calc and viewport units may not be supported on some old browsers. You can find the exact support below http://caniuse.com/#feat=calc http://caniuse.com/#search=vw So as for every CSS property that may not be supported in some cases, you want a fallback rule. if the theme already has a style for the property in question (like Site title font size), this will be the fall back rule. If there is no existing styling for your element, like the header area min-height, you will want to add a fallback rule before the one using calc and or vw/vw For example, for the header area you would use

#header {min-height:250px; min-height:calc(200px + 10vh);}

So if the calc rule fails, the fallback will be 250px