In the one and only stylesheet for Protostar, layout.css, the @media calls for Protostar are the following: 

@media (min-width: 768px) and (max-width: 979px) 
@media (max-width: 767px) 
@media (max-width: 480px) 
@media (min-width: 768px) and (max-width: 979px) 
@media (min-width: 1200px) 
@media (max-width: 979px) 
@media (min-width: 980px) 
@media (max-width: 767px) 
@media (max-width: 980px) 

I am showing these mostly to itterate where the breakpoints are for the @media calls, 1200px, 980px, 768px, 480px

If you study the template.css stylesheet for Protostar, you will see some of the @media calls repeated.  I think this is to group certain functionality. You will also see later @media calls override settings in earlier ones.  This puzzles me at this point, but I am sure there must be some reason.

If you want to override these settings, I might suggest that you insert a custom stylesheet in the index.php <head> section rather than editing the template.css.  I suggest this for two reasons.  One, you will know exactly which styles you have altered if they are in a separate stylesheet. Two, if you upgrade your Joomla site, your custom styling can be easily replicated and won't be removed when the template.css is replaced.

Certain classes have their display settings changed at these breakpoints.  Things are turned on or off.

Wide screens

Above 767px, for static layouts, the .container width is set to a width of 940px. The setting for .row-fluid is width: 100%; and all of the .row-fluid [class*=".span"] (every class starting with .span) settings are at a percentage.

The <ul class="nav-pills"><li> tags have float: left assigned to them and they layout horizontaly in the .navigation div.

max-width: 767px;

For the static layout, the .container width is set to 724px.

If you view a Protostar site on a tablet or phone or even a narrowed down broser window, with the static layout selected, you will see that there is a little cushion on either side of the container.  At 767px and below, the body has a padding-left and padding-right of 20px

What you might note at widths between 767px and 480px are the horizontal menu <ul class="nav-pills"><li> tags. These stay at the same width as on a wide screen display, but they might wrap around and form two lines if there are a number of them. The height of the .navigation div expands to accomodate the two lines.

max-width: 480px;

At very narrow screen widths, the .container width is set to auto, which means that it will now reduce in size proportionately to the screen size.

The .row-fluid is set to 100% (which really doesn't change from before) but more importantly, all of the .row-fluid [class*=".span"] settings are width: auto.  This is what controls the stacking at the more narrow screen widths.  At widths greater that 480px, the widths of these classes within .row-fluid are set to percentages.  This holds true for both the static layout and the fluid layout.

The horizontal menu <ul class="nav-pills"><li> tags are now stacking vertically as float:none; is assigned for them and they expand to the width of the .navigation div.


Has 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