If you are using the Static Layout for Protostar as set in the Template Manager under Extensions, the default settings in template.css for anything with class="container" are:

.container {
    max-width: 960px;
}

and

.container, .navbar-static-top .container, .navbar-fixed-top .container, .navbar-fixed-bottom .container {
    width: 940px;
}

Keep in mind that the class="container" is used for the very first <div> on the page and also for the <footer> div.

Also keep in mind that template.css has other styling set up for this class under the @media calls for narrower screens.

How to override the max-width setting in Protostar

You need to create a custom stylesheet. It is not advisable to edit the original template.css as it will be overwritten if you upgrade. Besides it is extremely long and convoluted.

To create a custom stylesheet, visit this article: 

Add a custom stylesheet to the Protostar Template

In this new stylesheet you want to create lines that override the template.css lines, such as:

.container {
    max-width: 1150px;
}

and

.container, .navbar-static-top .container, .navbar-fixed-top .container, .navbar-fixed-bottom .container {
    width: 1150px;
}

The Consequences

When you do this, you must realize that people with screens that are narrower than this new width, may not have a good visual experience, depending on how their device interprets your code. The 940px width works well with tablets in landscape mode. Your new width may cause problems.

To solve this you may want to add your own @media call and add lines for these tablet users.

@media (max-width: 960px) {
    .container {max-width: 960px;}
    .container {width: auto;}
}

The style of width: auto will fill the available space in the containing element.

What is the difference between max-width: and width:?

The value of max-width: overrides width:. This means that if somewhere in your stylesheet you have a max-width: 750px; you can't force this same element to have a wider width by using something like width: 950px;

Since template.css uses both, you need to add lines that overwrite both in your custom stylesheet.

 


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.