The Protostar template has a choice of static or fluid for the layout under the Options tab in the Template Manager.

Option for Static Layout in Joomla 3.2's Protostar Template

The static layout reduces the containing div and columns in a series of steps designed for use on monitors, tablets and phones.

The styling for these layouts is a stylesheet called template.css in the css folder under the protostar folder in templates.

The static layout option will have an outside containing div called container of max-width: 940px. This will keep the content of the site at 940px wide for large monitors and wide laptops.

The #sidebar#content and #aside divs are a percentage of the containing div of .row-fluid which has a width of 100% and will fill the containing div of the container.

As the screen size reduces (by reducing the browser width or on portrait view on tablets), the container width steps down in size to 767px. The #sidebar, #content and #aside columns are narrowed down accordingly as their widths are a percentage of the outside container.

As the screen size reduces even more (by reducing the browser width or on phones), the container width is set to auto - which essentially makes the container reduce in width as the screen reduces in width. If you have a horizontal menu in position-1, which is placed in the #navigation div, the menu will stack vertically and each menu item will be the width of the entire screen.  The interior columns are all set to auto as well and take up the entire width of the container and stack vertically.  The default layout for Protostar will place #sidebar on top, #content in the middle and #aside below.

Monitors & Tablets Landscape: .container {width: 940px;} and .row-fluid {width: 100%}

This is the layout for the Static setting for Protostar on computer monitors that have a screen width of 980px or more. Many laptops will also have a screen with this many pixels or more, but tablets and phones will not.

This is the styling that comes with template.css. The .container element has a set width of 940px and padding of 20px, which adds up to 980px. The @media styles are not being used at this point. The .container element will stay this width no matter how wide the monitor as long as it is greater than 980px.

.row-fluid .span3 {width: 23.4043%} This will govern the width of your #sidebar and #aside columns

.row-fluid .span6 {width: 48.9362%} This will govern the width of your #content if you have modules on the right and left.

Protostar Template with Static setting

Tablets Portrait: .container {width: 724px;} and .row-fluid {width:100%} 

This setting is for narrower screens but not phones. This will be applied for many tablets in landscape mode. You will still maintain your columns, but they are a percentage of the .row-fluid containing div., so because the .container is narrower, so are the columns. The columns may be narrower than they were when viewed on a monitor.

@media (min-width: 768px) and (max-width: 979px) { }

.row-fluid .span3 {width: 23.4043%} This will govern the width of your #sidebar and #aside columns

.row-fluid .span6 {width: 48.9362%} This will govern the width of your #content

If you have something in those columns that require a fixed width, such as advertisements, you need to override this settings with your custom stylesheet. This can present a challenge. 

You can override these percentages with your custom stylesheet if you want wider side columns. Keep in mind that to override the settings for these narrower settings you need to place the overrides in an @media group for this stepped width.

static-step2-screenshot

Phones Landscape: .container {width: auto;}, .row-fluid {width:100%} and .row-fluid [class*="span"] {width:100%}

@media (max-width: 767px) {}

At this width, the #sidebar, #aside, and #content divs align vertically.

static-step3-screenshot

Phones Portrait: .container {width: auto;}, .row-fluid {width:100%} and .row-fluid [class*="span"] {width:100%}

static-phone-screenshot


Has BJ.Zemplate.com helped you with understanding Joomla?

If you would like to make a small contribution to help fund this resource, that would be great, but do not feel obligated in any way.

Donation Amounts


Still not finding a special topic?

Use Google's Search function below for search the content of bj.zemplate.com.