How do I increase the width of the Container on the home page? Topic is solved

Everything to do with Joomla! 3.x templates and templating.

Moderator: General Support Moderators

Forum rules
Forum Rules
Absolute Beginner's Guide to Joomla! <-- please read before posting, this means YOU.
Forum Post Assistant - If you are serious about wanting help, you will use this tool to help you post.
Post Reply
MaxNet
Joomla! Apprentice
Joomla! Apprentice
Posts: 6
Joined: Fri Aug 21, 2015 10:28 pm

How do I increase the width of the Container on the home page?

Post by MaxNet » Sun Jul 14, 2019 4:14 am

I just installed Joomla 3.9.10 and would like to increase the width of the container on the hompage. How do I increase that width? The width of the container right now is 980px. I would like to increase it to about 1100px. Thanks for the help!
You do not have the required permissions to view the files attached to this post.

User avatar
imanickam
Joomla! Master
Joomla! Master
Posts: 27140
Joined: Wed Aug 13, 2008 2:57 am
Location: Chennai, India

Re: How do I increase the width of the Container on the home page?

Post by imanickam » Sun Jul 14, 2019 5:23 am

It looks like you are using the template Protostar. If this is the case, try the following:

- Go to the screen "Templates: Styles (Site)" (Extensions => Templates -> Styles)
- Select the style "protostar - Default"
- Click on the button "Duplicate" - now you would notice another style named "protostar - Default (2)"
- Open the style "protostar - Default (2)" for Edit
- Click on the tab "Advanced"
- For the option "Fluid Layout" choose the value "Fluid" (the default is "Static")
- Click on the tab "Menu Assignment"
- Select the menu item "Home"
- Save the settings

With the above steps, the Home page would expand to fill the screen and the rest of the pages would be narrow with the container width of 960px.

Hopefully, this should meet your need. If not, you may have to make a copy of the template Protostar and change the width of the container. If you inclined to do this, make sure to create a new css file named user.css to hold the css changes you make. This file would reside at \templates\your-template-name\css.
Ilagnayeru (MIG) Manickam | இளஞாயிறு மாணிக்கம்
Joomla! - Global Moderators Team | Translations Coordination Team | Tamil (தமிழ்) Translation Team

Eegan - Support the poor and underprivileged

MaxNet
Joomla! Apprentice
Joomla! Apprentice
Posts: 6
Joined: Fri Aug 21, 2015 10:28 pm

Re: How do I increase the width of the Container on the home page?

Post by MaxNet » Mon Jul 15, 2019 9:36 am

imanickam,

Protostar is the template that I am using. Making the adjustments as you have described, the Home page does expand and fill the entire screen.

I would like to have the container expand from it's current 980 px. to 1100px. and not the entire page. The increase to 1100px would be great for all web pages of the website and not just the Home page. In order, for this to occur what commands would I need to make this happen?

Thanks for the Help imanickam!

User avatar
sozzled
Joomla! Champion
Joomla! Champion
Posts: 7331
Joined: Sun Jul 05, 2009 3:30 am
Location: Canberra, Australia
Contact:

Re: How do I increase the width of the Container on the home page?

Post by sozzled » Mon Jul 15, 2019 9:52 am

Try this:

Code: Select all

div.container {
  min-width: 1100px;
}
https://www.kuneze.com/blog
Former member of Kunena project team
If you think I’m wrong then say “I think you're wrong.” If you say “You’re wrong!”, how do you know?

MaxNet
Joomla! Apprentice
Joomla! Apprentice
Posts: 6
Joined: Fri Aug 21, 2015 10:28 pm

Re: How do I increase the width of the Container on the home page?

Post by MaxNet » Mon Jul 15, 2019 10:20 am

Sozzled,

Added the code to the end of the protostar template.css file and it worked Great!

One more question.

Once I minimize the web browser (firefox and chrome) the website (ipainthouses.net) shows scroll bars at the bottom and the side. I would expect the 'side scroll bar' to appear, yet the bottom scroll bar would not appear if the website was responsive, isn't that correct?

Is there a way to make the protostar template a responsive website?

Many Thanks for the help Sozzled!

User avatar
sozzled
Joomla! Champion
Joomla! Champion
Posts: 7331
Joined: Sun Jul 05, 2009 3:30 am
Location: Canberra, Australia
Contact:

Re: How do I increase the width of the Container on the home page?

Post by sozzled » Mon Jul 15, 2019 10:28 am

MaxNet wrote:
Mon Jul 15, 2019 10:20 am
Added the code to the end of the protostar template.css file and it worked Great!
I'm pleased to hear that it worked but that's not the way to fix this. You see, the next time that you update Joomla, you will lose those changes you just made. Please read the documentation about how to create a custom user.css file (which is where you should have placed those lines of CSS): https://docs.joomla.org/J3.x:Adding_a_c ... _Protostar

As far as your second question is concerned—the question about how to make a website "more responsive"—I only answer one question per forum topic. You asked about how to make the container width at least 1100px. @Per's suggestion, to use the "fluid" setting is the right way to go about this. The "fluid" setting will make the template "more responsive".
https://www.kuneze.com/blog
Former member of Kunena project team
If you think I’m wrong then say “I think you're wrong.” If you say “You’re wrong!”, how do you know?

User avatar
imanickam
Joomla! Master
Joomla! Master
Posts: 27140
Joined: Wed Aug 13, 2008 2:57 am
Location: Chennai, India

Re: How do I increase the width of the Container on the home page?

Post by imanickam » Mon Jul 15, 2019 1:22 pm

Try the following:

- Open the Default template Style for Edit
- Click on the tab "Advanced"
- For the option "Fluid Layout" choose the value "Fluid" (the default is "Static")
- Save the settings

In the file user.css that is located in the directory \templates\template-name\css, add the following css entry:

Code: Select all

.container-fluid {
	max-width: 1100px;
	margin-right: auto;
	margin-left: auto;
}
Ilagnayeru (MIG) Manickam | இளஞாயிறு மாணிக்கம்
Joomla! - Global Moderators Team | Translations Coordination Team | Tamil (தமிழ்) Translation Team

Eegan - Support the poor and underprivileged

MaxNet
Joomla! Apprentice
Joomla! Apprentice
Posts: 6
Joined: Fri Aug 21, 2015 10:28 pm

Re: How do I increase the width of the Container on the home page?

Post by MaxNet » Mon Jul 15, 2019 2:22 pm

sozzled wrote:
Mon Jul 15, 2019 10:28 am
MaxNet wrote:
Mon Jul 15, 2019 10:20 am
Added the code to the end of the protostar template.css file and it worked Great!
I'm pleased to hear that it worked but that's not the way to fix this. You see, the next time that you update Joomla, you will lose those changes you just made. Please read the documentation about how to create a custom user.css file (which is where you should have placed those lines of CSS): https://docs.joomla.org/J3.x:Adding_a_c ... _Protostar

As far as your second question is concerned—the question about how to make a website "more responsive"—I only answer one question per forum topic. You asked about how to make the container width at least 1100px. @Per's suggestion, to use the "fluid" setting is the right way to go about this. The "fluid" setting will make the template "more responsive".

Sozzled,

I created the user.css file as described and added the code to it. It worked Great!

MaxNet
Joomla! Apprentice
Joomla! Apprentice
Posts: 6
Joined: Fri Aug 21, 2015 10:28 pm

Re: How do I increase the width of the Container on the home page?

Post by MaxNet » Mon Jul 15, 2019 2:33 pm

imanickam wrote:
Mon Jul 15, 2019 1:22 pm
Try the following:

- Open the Default template Style for Edit
- Click on the tab "Advanced"
- For the option "Fluid Layout" choose the value "Fluid" (the default is "Static")
- Save the settings

In the file user.css that is located in the directory \templates\template-name\css, add the following css entry:

Code: Select all

.container-fluid {
	max-width: 1100px;
	margin-right: auto;
	margin-left: auto;
}

Imanickam,

I added the code to the user.css file that I created and and it worked! The scroll bar at the bottom of the website no longer exists, yet the side scroll bar is still there as expected. Great Work! Great Code! As I just found out the background is 'white', yet I can not figure out how to change the 'white background color' that all the text appears on. Any ideas? I will start a new question if necessary.

User avatar
imanickam
Joomla! Master
Joomla! Master
Posts: 27140
Joined: Wed Aug 13, 2008 2:57 am
Location: Chennai, India

Re: How do I increase the width of the Container on the home page?

Post by imanickam » Mon Jul 15, 2019 3:04 pm

As the change is connected with making a change to the Fluid Layout, let us keep the discussion in this topic itself.

Add the following css code to the file user.css so that you can see the background color.

Code: Select all

body.site.fluid {
	background-color: #769950;
}
.body .container-fluid {
	padding: 20px;
}

.body .container-fluid {
	background-color: #fff;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px;
	padding: 20px;
	border: 1px solid rgba(0,0,0,0.15);
	-moz-box-shadow: 0px 0px 6px rgba(0,0,0,0.05);
	-webkit-box-shadow: 0px 0px 6px rgba(0,0,0,0.05);
	box-shadow: 0px 0px 6px rgba(0,0,0,0.05);
}

Note: Substitute the color code of the css attribute background-color from #769950 to what you have. You can see this code when you open the Default Template Style for Edit, in the tab Advance, in the option Background Color.
Ilagnayeru (MIG) Manickam | இளஞாயிறு மாணிக்கம்
Joomla! - Global Moderators Team | Translations Coordination Team | Tamil (தமிழ்) Translation Team

Eegan - Support the poor and underprivileged

MaxNet
Joomla! Apprentice
Joomla! Apprentice
Posts: 6
Joined: Fri Aug 21, 2015 10:28 pm

Re: How do I increase the width of the Container on the home page?

Post by MaxNet » Mon Jul 15, 2019 4:04 pm

imanickam wrote:
Mon Jul 15, 2019 3:04 pm
As the change is connected with making a change to the Fluid Layout, let us keep the discussion in this topic itself.

Add the following css code to the file user.css so that you can see the background color.

Code: Select all

body.site.fluid {
	background-color: #769950;
}
.body .container-fluid {
	padding: 20px;
}

.body .container-fluid {
	background-color: #fff;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px;
	padding: 20px;
	border: 1px solid rgba(0,0,0,0.15);
	-moz-box-shadow: 0px 0px 6px rgba(0,0,0,0.05);
	-webkit-box-shadow: 0px 0px 6px rgba(0,0,0,0.05);
	box-shadow: 0px 0px 6px rgba(0,0,0,0.05);
}

Note: Substitute the color code of the css attribute background-color from #769950 to what you have. You can see this code when you open the Default Template Style for Edit, in the tab Advance, in the option Background Color.
imanickam,

Excellent! It works Great. The responsiveness of the template works and the bottom scroll bar has disappeared and the side scroll bar is there as expected. Many Thanks for the help! :)


Post Reply

Return to “Templates for Joomla! 3.x”