Shape 5

As seen in the attached image, there is too much empty space. How can I reduce this area?

Hello,

You can add something like the following to custom.css:

#s5_bread_lang_holder {
margin-bottom:-50px;
}

Thank you Mike!

Let us know if you have any further questions

Sorry to bother you again. I checked now with this code that you gave me above ... but nothing happends I am afraid.

I still have the big "gaps" present.

Any ideas on how to solve this?

Hello,

Try this instead:

#s5_bread_lang_holder {
margin-bottom:-50px !important;
}

No change I?m afraid. Any other ideas  ???

Chrome Developer Tools is your friend.  Learn how to use it here
https://developer.chrome.com/devtools/docs/videos

I would also suggest looking at Firebug if you are using Firefox. It is a very useful tool for identifying specific areas on a website and seeing where the inherit CSS is coming from.

chriddo, did you ever find out how to resolve this problem?  I have the same problem, and entering this code in the custom.css file did not work for me either?


http://www.go2japan.org/a2/

Hello,

That's actually a different area than the original post. Try adding the following to custom.css:

#s5_header_spacer {
display:none;
}

Actually, the original post (see chriddo's original screenshot) is the same thing I want to do, namely to reduce the margin from the breadcrumb to the top of the first article.

One screenshot I am attaching is NO-CODE. (As chriddo said, "There is too much empty space. How can I reduce this area?").

The other one is WITH-CODE that you suggested, which entirely removes the breadcrumbs.

I do want breadcrumbs to display. I just don't want so much white space around it. Hope this makes sense.

- jeff

Hello,

There are really 2 areas here defining that space.


You can go into those files to modify the padding's and height of the spacer block as needed. You can also alternatively add some large negative margins such as:

Ok, Mike, this is really helpful and exactly what I needed. Thank you for giving me those two lines in the template.css file.  I have adjusted them to my liking.

One related question about breadcrumbs... I don't know how to make the separators (e.g., > or | or // ) appear in my breadcrumbs. I've entered ">" but they don't appear.

- jeff

Hello,

The separators should be built into an input field directly into the breadcrumb module options provided with Joomla. Generally we just leave it blank or use // in the input fields.

Mike,

Yes, I have entered ">" into that breadcrumb module. I also tried "|" and "//" as well. Nothing works. The separator area is always blank. This worked fine on the previous S5 template I used for this site. I just thought there might be a bootstrap issue for this.

- jeff

Hello,

Maybe try checking what the font values are set as. I have seen issues occur when font values are set as "em" values instead of "px" values in bootstrap.

Sorry for my ignorance, but where would I find the values in bootstrap?

Can you post a URL where you have set the back end values for the breadcrumb input to // please.

I haven't entered anything for bootstrap, other than the Vertex setting in the template admin area. I didn't edit any CSS for bootstrap. Everything has been pretty much default.

The only place I edited the breadcrumb separator text is in the Breadcrumb module in the module mgr. And there's no place for px or em.

Here's the bootstrap section in Vertex...

Hello,

Please post a URL as requested.

http://go2japan.org/a2/blog

Hello,

Remove this from the Template.CSS file.

In what line does it appear? I ran a search and that line of code did not appear.

470

Perfect! Thanks Mike!

No problem :)