Jomsocial-pro_4.9.1 - Close the gap on top close to the header

alphamatt

I like my Joomla Jomsocial platform so far.
I would like to close the gap as shown on the image below as indicated by the red arrow.

To make the platform look like on the image below

Which CS do I need to modify? I would also like to remove the grey area!
Any help will be much appreciated!

saguaros

alphamatt Hi

It's padding / margin set for the main body section of the Joomla template you're using. You can override custom css for it.

mikeymike

alphamatt Try this:

/* TO ENSURE FULL WIDTH ON JOMSOCIAL PAGES */
body.wrapper-fluid .site-grid {
grid-gap: 0 0em;
grid-template-columns: [full-start]minmax(0,1fr)[main-start]repeat(4,minmax(0,25%))[main-end]minmax(0,1fr)[full-end];
}
.container-component > main {
margin-top: 0;
}

This is what I achieved on my development site. You can adjust colours in the theme designer.

alphamatt

saguaros

Thanks, already solved

alphamatt

Thanks,
I already have this code on my user.css.

Only thing is that I did't have ; margin-top: 0; to define the top.
It would also work if I add the margin top as you suggested, but I have solved it using a different code, which I worked out together with CHATGPT.

I prefer the solution I got because I could define the margin-top for desktop and mobile differently.