It’s something in your theme.
To confirm, switch to a WP theme like 2015 and see if the issue persists.
It could also be caused by some other plugin or code that affects group layout.
You can always use browser inspection tools to find out where the white space is coming from.
Hi Shane,
Thank you for your answer!
I checked with other themes and with some the groupes are displayed correctly and with others, not.
I didn’t know about the “browser inspection tools”, I will take a look at this.
Thanks!
2 weeks later, I’m still stuck with the same displaying problem. On the template creator’s forum, I asked the same question, and got this answer:
Any particular reason you’re using a top margin here?
body.single-item.groups #buddypress div#item-header #item-header-cover-image #item-header-content, body.single-item.groups #buddypress div#item-header #item-header-cover-image #item-actions {
clear: none;
margin-left: 0;
margin-top: 225px;
max-width: 50%;
}
It seems it’s a good clue to fix my problem, but here’s the thing: since I’m a newbie with CSS, I have no idea where to find these lines and modify them. I suppose I have to change “225px” to “0” — how/where can I edit this line?
Thank you very much for your help, much much appreciated!
Hi @writingbox – Unfortunately, it’s very hard to debug this without access to the live site. But if the problem is indeed that there is a margin-top issue on this element, you could put the following into your child theme’s style.css:
body.single-item.groups #buddypress div#item-header div#item-actions {
margin-top: 0;
}
Be sure to do this in the stylesheet for your child theme, not in BuddyPress itself or in your WP theme, because those changes would be lost when the plugin/theme is updated. Here’s a guide https://premium.wpmudev.org/blog/how-to-create-wordpress-child-theme/ – the section you want is under the “Creating a Child Theme” header, and the file where you should put your customizations is style.css.
Hi Boone 🙂
Thank you so much for this solution, I’m in the process of creating the child theme. So far it’s all going well… but now for the “header” part, what you say is different than what the article says: you suggest to make the customizations in the style.css file, while the article instructs to copy the parent’s header.php file in the child theme folder and make the changes to this file (header.php number 2), and is mentioning nothing about style.css for these changes.
Who is right, what should I do? 🙂
Thanks a lot!
I added your lines to both files (trying with one, and then with the other), and for now it doesn’t change a thing… :-/
CSS changes must go in a CSS file; putting them into a header.php file won’t do anything, unless you use some specific syntax.
It’s possible that the style.css sheet that you are referencing is not actually being loaded, due to an improperly built child theme. You can tell by viewing the source of the page and looking for a file being loaded in a <link> tag, with a URL along the lines of: example.com/wp-content/themes/my-theme/style.css. If you don’t see this anywhere, then you need to figure out why before you can debug anything else.
If the stylesheet is indeed loading, but the change is not taking effect, there may be a problem with the selector I’ve suggested. The best way to figure this out is by right-clicking the element, selecting “Inspect Element” (or similar, depending on browser) from the context menu, and then using your browser tools to experiment with different CSS selectors until you find the right level of specificity. Here is one tutorial on how to do this, and you can find thousands of others on Google (“how to use browser developer tools” or something like that). https://developer.mozilla.org/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools
My CSS also assumes that the diagnosis of the theme author is correct. I can’t verify that without actually being able to see a live copy of the site. If in doubt, you may consider reaching out to the theme author, who may be able to confirm some of the advice on this thread.
Hi Boone,
I will look at the possible solution finders you give me, and get back here with the results.
Here’s the link: http://auteurpreneur.net/groupes/echangez-de-vos-nouvelles-ici-1129466978/
Thank you very much!
Thanks for the link. It does appear that the margin-top property is the culprit.
Here is the CSS that should fix it:
body.single-item.groups #buddypress div#item-header #item-header-cover-image #item-header-content, body.single-item.groups #buddypress div#item-header #item-header-cover-image #item-actions {
margin-top: 0px;
}
I don’t recommend that you make the change directly to your themes/parabola/style.css stylesheet, as it will be overridden on the next update. I suggest building a child theme. But you could also use a custom CSS plugin, or the Custom CSS tools in Jetpack.
Hi Boone,
I followed your previous instructions and added your proposed CSS.
Here’s the result: http://www.auteurpreneur.net/wp-content/themes/parabola-child/style.css
Still, the margin hasn’t changed… Have a put the CSS lines at the right place?
Thank you!
No – you have put it inside the comment marks that indicate the stylesheet header. Move it below this:
*/
Then you have to actually activate the them. It looks like you are still running the parabola theme.
I should note that, if you are at all uncomfortable with building a child theme, then you should instead use Jetpack’s Custom CSS module (or a similar plugin). While building a child theme is pretty straightforward once you’re used to it, it can be intimidating at first and has the potential to break your site (temporarily!) if not implemented correctly.
Hi Mr. Boone 🙂
Yes, I tried to activate it and *hum* everything went weird on my website lol
O.K. so I guess I would need to study this theme child mystery or try with Jetpack’s Custom CSS module, or maybe drop the groups altogether and go with bbPress…
I will first try to save the groups. 🙂
Thank you so much for your help!
Don’t abandon the Groups functionality or BuddyPress over this small display issue! With a plugin like this https://wordpress.org/plugins/simple-custom-css/, it is trivial to add the CSS that I gave above.
Building a child theme is more complex, and is something you should learn down the road if you plan to make extensive customizations. But if you just need to make a small change like what I’ve suggested, then a plugin like https://wordpress.org/plugins/simple-custom-css/ is more than enough.
Thank you so much! I will try that for sure!
O.K. the plugin is rather easy to use, that’s a good discovery! I was was able to use it to change font size on bbPress for another website!
The space has disappeared, alright, but now the group description and the group admin name have moved up on the group cover image…
margin-top20px
margin-top0px
Strange behavior, any idea?
Thanks!
Looking more closely at your styles, the problem might be the width of your #item-meta. Remove the margin-top declaration you entered before, and try this instead:
#buddypress div#item-header div#item-meta {
width: 200px;
}
Your next step is to start getting familiar with CSS 😀 https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS
