Protostar Fixed Width 960px, needs to be 1150px Please Help

[Maximizer]

The default (container) width of the protostar template is set for 960px, in the default responsive Static layout. I need the protostar template to remain in the responsive Static layout, yet with the width of 1150px, in the responsive Static layout.

How do I change the fixed (container) width (960px) to 1150px, in the responsive Static layout, of the default protostar template?

I understand, I may need to create a new css file and possibly add to another file.

If you can tell me all of the necessary steps, in order to change the fixed width from 960px to 1150px, staying in the responsive Static layout of the default protostar template, it would be really Very Much Appreciated!

Thank You Very Much

[xplosion]

You must do some changes on your template.css
1. Go to the line 7008, and change this code:

Code: Select all

.container {
    max-width: 960px;}

with this one:

Code: Select all

.container {
    max-width: 1150px;}

2. Go to the line 5219, and change this code:

Code: Select all

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

with this one:

Code: Select all

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

HTH

[Maximizer]

It Works, It Works, It Works !!!

Thank you Very Much, xplosion!

I changed those values (parameters) as you mentioned and it works Great.

I tried other websites (forums included) for the information and they were totally wrong! Their answer's required creating one or more, css files and adding them to the index.php file. Of which, their answer's did not work. Great to have the Joomla Forum, with Knowledgeable individual's to ask question's of!

May I ask one more question?

The top of the container, that I just increased in width, has a 20px margin (space) at the top of the (container) default responsive protostar template. How can I reduce it (the container's top height) to 5px or 0px, and keeping the responsive nature of the default protostar template of joomla 3.3.6, that I just increased in width?

Many Sincere Thanks for your Help

[xplosion]

In this case open the same template.css and change this code (line 6953):

Code: Select all

body.site {
    background-color: #f4f6f7;
    border-top: 3px solid #0088cc;
    padding: 20px;}

with something like this:

Code: Select all

body.site {
    background-color: #f4f6f7;
    border-top: 3px solid #0088cc;
    padding: 5px 20px;}

Tell me if it works

[Maximizer]

Once again, It Works

As specified, I changed the value(s) (replaced the existing code) on line 6953 of the default Protostar template (joomla 3.3.6), with the code you have provided me with, and it works Great!

I now have a website, with a container width of 1100px, with a top border (padding) of the 'container' of 12px. The outer portion of the 'container' looks great because it is a darker solid color, and contrast very good with the color of the inside of the 'container'.

I now have, increased every webpage presence (container size on my website) by at least 11.1%, staying with the 'static' responsive layout, by increasing the width of the 'container' and decreasing the padding of the height of the 'container'. I can place more content on each webpage of my website, and have not given up much of the 'static' container's padding (border) on the left and right sides, and the top of the container's padding (border).

The website is still responsive and with the change's, more content is available to the visitor's of the website, especially those website visitor's using a Laptop, Tablet or Cellphone (smartphone).

Thank you Very Much You are quite knowledgeable and very considerate to provide me with such help. Thank you.

Sincerely,

Maximizer

-----------------------------------------------------------
"I too, understand that an untested backup is as good as no backup at all"

[xplosion]

I'm glad to help you.
Have a nice Joomla day !

[Discov_40]

Hi Guys,

I have found and followed these instructions to widen my page, but my header image no longer spans the width of the page and unable to get this to change.

In addition, I would like to make the main (central column) wider as it contains the main content, but unsure how to do this and fairly new to Joomla.

Any help in simple terms would be useful.

Thanks

[trikeman]

I was searching for this same question and answer. I'm impressed and thank you for the correct answer.

[sanjak]

Hi I tried this:
1. when i used inspect element to see the front end. it was working
2. when i did it from the back end template.css . it isnt working. help please

[rvca]

Hi, hi have the some issue, i need to increase the max resolution of the prostostar joomla template, and i already tried to follow the instrutions of the coleague "xplosion", but i can´t find those variables.
May be the reason is because i´m using joomla 3.6.
I already changed the max resolution of the container, and it works, but looses the responsive layout behavior.
Can please anyone give me some information about make this happen?
Thank you

[rvca]

Thank you for noboby try to help.

[TenTrees]

Hi rvca,

The variables are still there but in different places:
.container {
max-width: 960px;} is now at line 7193

.container, .navbar-static-top .container, .navbar-fixed-top .container, .navbar-fixed-bottom .container {
width: 940px;} is now at line 262

In future, I suggest you download the template.css file and use an editor such as Notepad+ + and use the search to find the code.

Hope this helps
TT

[mmj]

Hi guys, I have the same issue but with solid 2 template, any hints please.

[effrit]

@mmj, problem is: everyone have protostar and nobody - solid 2.
so, at least, you must provide link to site or template demo.

[Carlos_Mendez]

Hi. It is not a good idea to modify template.css. Do you css overrides using a file called "user.css" located in protostar css folder.

Protostar load the user.css file at the end so it will override template.css declararions.