protostar fixed page width for all media devices

Question

I am using Joomla 3.2.1 with the protostar template. The template is set for static behaviour. I would like to temporarily disable the responsive behaviour of the protostar template (not the same as switching the static/fluid option in the template manager). I would like to fix the page width to 960px, regardless of the media or the browser window size. As a C programmer, I am not very familiar with CSS. I have gone through template.css and it seems that it defines sets of rules for each media type, but it's very confusing. After manually trying to edit the template.css, I still could not obtain a fixed page width.

Answer 1

You are correct, the responsive rules are inside the template.css and are in this form:

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

@media (max-width: 767px) {

You should find all code blocks (16 matches including print queries which you can ignore) and add some false condition, either by changing the sizes (i.e. max-width:1px) or adding some odd value for a query that is not specified i.e.

@media (aspect-ratio: 7) and (min-width: 768px) and (max-width: 979px) {

@media (aspect-ratio: 7) and (max-width: 767px) {

this will effectively disable the queries if you just need to "stash" them aside for a while. If you want a long-term solution, find the matching brackets and delete the entire content of all media queries except for print.

Since this file is shipped with Joomla, please consider that future Joomla updates may overwrite this file with the default, keep a backup copy somewhere so you don't lose your work.

Edit less instead!

As @Elin pointed out, you can editing the less files will be much easier:

templates/protostar/less/template.less

simply comment out / delete the lines around 60:

@import "../../../media/jui/less/responsive-767px-max.less";

then recompile, follow this guide here