How do I remove the big space between the header/menu and the image right below it?

[vcarden]

These is a large space and it is driving me nuts because I cannot get rid of it!

Thank you

[Adam7]

No problem! Glad to help find a non-coding solution for you.

[HalswellWigram]

Hi there,

Im attemting to reduce the height / space that the title and navagation sits in.... so the rest of the site sits higher on the page how do you do this? Can anyone point me in the right direction?

Thanks James

[Bernadette3]

Hey James! Can you post your site name so more people can have the opportunity to chime in?

[HalswellWigram]

Hi Bernadette,

Sure thing, it is https://www.halswellwigramrugby.com. I have just taken over the administration of our site and starting to tidy it up and there is just far too much dead space at the top. love to know how to reduce this as i'm building new pages and want to get them sorted before I publish.

James

[Bernadette3]

Thanks @HalswellWigram. Looks like that is due to the theme you are on. It's one of our older themes so I definitely recommend changing to our newer, responsive themes. In fact, I checked a preview for you and the Clean Lines theme looks really nice with your site.

To change theme: log in, click on Themes, then Change Theme. You can preview any of the themes listed before opting to choose/change. You can find Clean Lines under the Event section, bottom right corner. 

[BARTLEIGH]

I too would like to remove much of the extra space between the header/menu and the image element right below it; and I am already using the Hugo-CleanLines 2 Theme.  I've chosed No header for all my pages, which helps marginally, but a too large space still exists. I've also spent time looking at all the CSS in main.less and header.less and elsewhere andanything that remotely looks like it's relevant for reducing padding and made changes, but to no avail. 

I've also tried, thinking there is no existiung CSS, adding some new CSS as suggested in some of the other posts in this thread.  I have used Firefox's development tool (inspector - style editor) and can't seem to find the relevant CSS code.  Here's a link to the site I'm working on for an artist friend.  It's designed to be minimal with the major focus on the art, so I would like to remove or at least cut in half the existing space.

https://www.jonericschafer.com/

Any ideas would be appreciated.

Bart

[#8]

@Adam Can you work the same magic for me...I've tried all of these suggestions and cannot get rid of that space.

https://www.uucy.org/

If you were able to take a look, we would greatly appreciate it!

Thanks,

Jason

[#9]

Did anyone ever get a definite answer on this. I've went through the code extensively and my enormouse space is above and below the slideshow element and it looks really bad.

I've checked so far:

-Padding for H1 tag

-Padding for content (it seemed to apply to width only)

-Padding for main wrapper

-Padding or extra space within the images itself

-I've already used the element settings to take away as much space as possible for the slideshow element itself.

I cannot find any code that can be edited specifically for padding on the slideshow itself. This is a very big deal for me since this is the best way to showcase products.

Please help!

[drfsc50]

thanks

[mathewhomberger]

Thanks a lot, changing the code worked for me but it didn't change the mobile phone site. I'm looking for the code to that but can't find it. Any kmowledge?

[grahamh]

I encountered a problem similar to this on a site I was developing. No amount of tweaking the padding seemed to make a difference. However if your layout has some flexibility then switching the page from 'no header' to 'header' (under Pages > Header type) closed up all the spaces, at least in the template I was using.

[rickyl]

I see this post was about 3-4 years ago, but I was currently having this problem and figured it out after about an hour.  Using the inspector element in Google Chrome helped me realize I needed to find an area called "main-wrap" which is in a lot of the css files, but I kept looking (control-f) in those files until I found the padding setting that worked.

In the “global.less” file, I changed Line 175 to change the padding between the header image and beginning of the body of the site.  See below in red.  I changed just both padding numbers to zero.

.main-wrap {

  width: 100%;

  background: @bg;

  .container {

    padding: 0px 0px;

  }

}

[PENicholson]

That makes sense. How do I edit the css/html safely?

How do I reach it?

Basically I am unable to locate this mysterious global.less file

[PENicholson]

Solved.  Purchased Smart Show 3d and bypassed all the nonsense.

Making a video and posting it on the main entry page of penbooks.net seems

to have completely solved the problem.