The Protostar template for Joomla 3.+ has a choice of Static or Fluid for the layout under the Advanced tab in the Template Manager.

Extensions -> Template Manager -> Protostar (in the Style column) -> Advanced

Screenshot of the Fluid Layout option for the Protostar Template for Joomla 3.2

The fluid layout reduces the width of <div class="container-fluid"> in proportion with the width of the screen. 

The static layout has a set width for <div class="container"> for large screens and a percentage of the screen for more narrow screens.

This option button simply tells the PHP behind Joomla to add "-fluid" to the end of "container" and then the stylesheet takes over from there.

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

Details about a Fluid Layout

The fluid layout option will have an outside containing div called container-fluid. There is no set width assigned to container-fluid so it will expand the content to fill the screen, save for the default padding of 20px, This full width will occur even on very wide monitors and the individual columns become wider as well.

The #sidebar, #content and #aside divs are a percentage of the containing div of .row-fluid. This is controlled by the styling for the class of span3, span6, etc. See the example:

.row-fluid .span3 {width: 23.4043%}
.row-fluid .span6 {width: 48.9362%;}

For the Fluid Layout of the Protostar template, if the screen reduces to a size narrower than 767px, all divs with a class starting with span, and all <li>s in the menu in position-1, will have a style of float: none and width: 100% assigned which will make them fill the containing div and stack vertically.  If you looked at your site on an iPhone you will see this vertical stacking, but it won't be doing that on the tablet (at least not on iPads landscape or portrait). 

Constantly reducing the size of the container will work nicely for some sites, but the columns also reduce in size.  This can prove to have some styling challenges, especially for images, 3rd party advertisements and fonts.  Also, having your site as wide as a very wide monitor can make blocks of text difficult to read, especially in the center content area.


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.