Joomla Templates Club 406,261 posts

[gribblej Friend gribblejJoin date: June 2011Posts: 208Downloads:28Uploads:6 Thanks: 4 Thanked: 10 times in 2 posts]

#200817

It’s a great template except for one thing. The stock gutter width appears to be 120px. My customer wants to shrink that by 100px – down to 20px. I don’t see how to do this. Could it be the variables.less file? I thought I had a solution in CSS but it messed up mobile view.
I can’t be the only one who’s had a customer make this request. Any ideas are welcome.
Thanks,
-Jim G.

[Adam M Moderator Adam MJoin date: May 2014Posts: 5159Downloads:33Uploads:66 Thanks: 95 Thanked: 1271 times in 1235 posts]

#547387

Hi Jim,

Please take a look at online documentation, you will see there’s a variable named ‘@grid-gutter-width‘.

Note : Don’t forget to navigate to your site back-end, go to Template Manager and choose to Compile LESS to CSS after that.

[gribblej Friend gribblejJoin date: June 2011Posts: 208Downloads:28Uploads:6 Thanks: 4 Thanked: 10 times in 2 posts]

#547550

Thanks, I read this but still wasn’t sure what to do exactly. I am loathe to “compile” because every time I’ve done it in the past it has sort of wreaked havoc. I know it’s not supposed to overwrite the custom.css files; but because Internet Explorer doesn’t always read the custom.css files I still do a lot of work right in the template.css file. Which all will be lost if I compile. I guess I could download the relevant CSS files and re-upload them…

[gribblej Friend gribblejJoin date: June 2011Posts: 208Downloads:28Uploads:6 Thanks: 4 Thanked: 10 times in 2 posts]

#547551

Maybe I wasn’t clear. I just want to reduce the padding/margin around the container. The documentation doesn’t seem to speak directly to this common need. Any other pointers?
-Jim G.

[Adam M Moderator Adam MJoin date: May 2014Posts: 5159Downloads:33Uploads:66 Thanks: 95 Thanked: 1271 times in 1235 posts]

#547621

Hi Jim,

If you navigate to documentation link I mentioned above and scroll down a little bit, you will see this part http://i.imgur.com/3XJqSXs.jpg

So please open file root_folder/templates/ja_biz/less/variables.less and update this code :

@grid-gutter-width: 40px;

After that, go to template manager and choose Compile LESS to CSS then recheck the result.

P/S: You might want to backup your current folder root_folder/templates/ja_biz/css so you can revert back if there’s any problem after that.

[gribblej Friend gribblejJoin date: June 2011Posts: 208Downloads:28Uploads:6 Thanks: 4 Thanked: 10 times in 2 posts]

#547683

Hi thanks, but I don’t think this will work. If I’m correct, gutter width is the space between columns. I just want to reduce the margin/padding around the edges of the website container/wrapper. So that less space shows between the background image and the border of the page.
-Jim G.

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#547686

It will take a few steps (CSS wise), but for starters . . . . .

If you haven’t yet done so, create a new file called “custom.css” within file path –> /templates/ja_biz/css/

Within that custom.css file, paste the following CSS rule:


.container {
width: 1440px;
}

NOTE:
The above pixel value of 1440px is used for example purposes only.
You can – and should – adjust the pixel value until you arrive at the result you’re most happy with.

Getting closer to what you are looking for? 🙂

[gribblej Friend gribblejJoin date: June 2011Posts: 208Downloads:28Uploads:6 Thanks: 4 Thanked: 10 times in 2 posts]

#547688

Thanks, but I know from experience that this will wreak havoc with mobile view. If simply put in custom.css file, it will override all query-based width values. I think it will work but not without some kind of media query. Anybody know the best way to do that? I earlier made a crude attempt that didn’t quite work.
-Jim G.

[gribblej Friend gribblejJoin date: June 2011Posts: 208Downloads:28Uploads:6 Thanks: 4 Thanked: 10 times in 2 posts]

#547692

This just messes up the layout. I’m still looking for an answer from Joomlart. How do you reduce the inside container/padding margin that surrounds all pages? The client feels it is excessive. It should be more like JA University. JA University has very little inside padding/margin. Should have used it to start with. But originally the customer wanted something trendy with an inline logo.
-Jim G.

[gribblej Friend gribblejJoin date: June 2011Posts: 208Downloads:28Uploads:6 Thanks: 4 Thanked: 10 times in 2 posts]

#547693

I’m including a screen shot of the excessive padding, which I measure at 120px. How can I reduce that to say 30px without damaging the layout?

---

Attachments:

1. 

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#547695

REVISED SUGGESTION . . . .

If you haven’t yet done so, create a new file called “custom.css” within file path –> /templates/ja_biz/css/

Within that custom.css file, paste the following CSS rule:


.container {
width: 1150px;
}

[gribblej Friend gribblejJoin date: June 2011Posts: 208Downloads:28Uploads:6 Thanks: 4 Thanked: 10 times in 2 posts]

#547700

This shrinks the container width but does nothing to address the inside padding/margin around all pages. That is what the customer wants to reduce. With the code in place, I still measure the gap at 120px.
-Jim G.

[Adam M Moderator Adam MJoin date: May 2014Posts: 5159Downloads:33Uploads:66 Thanks: 95 Thanked: 1271 times in 1235 posts]

#548071

Hi Jim,

Please open file root_folder/templates/ja_biz/css/themes/blue/custom.css and add this code at the end of file and recheck :

@media (min-width: 1200px) {
.container {
width: 1200px;
}
.main-container {
margin: -1px 80px;
}
}

[gribblej Friend gribblejJoin date: June 2011Posts: 208Downloads:28Uploads:6 Thanks: 4 Thanked: 10 times in 2 posts]

#548176

This looks very promising when I test in Chrome and Firefox. Am going to give it a try. I know there had to be a media query but I am admittedly a newbie at that!
-Jim G.

[gribblej Friend gribblejJoin date: June 2011Posts: 208Downloads:28Uploads:6 Thanks: 4 Thanked: 10 times in 2 posts]

#548179

Hi Adam,
This has really helped! Now though, once again, Internet Explorer is the only browser that doesn’t fetch the code. Everybody else reads it with no problem. So, do I need to add an ie-specific code? I’ve seen many examples but have never coded it myself. At the least the customer will be happy that the margin issue is fixed for the most popular browsers. Explorer’s popularity keeps plummeting but it still hangs in there at 12 to 25 percent usage share, depending on which source you trust. I know we all wish it would just disappear completely.
-Jim G.

[Author]

Posts