-
Hello,
I have a huge white space between my main nav menu / header and my hero image.
I’ve been playing around trying to figure out why but I can’t solve it. Thought it might be padding? But can’t see where to change that to remove the white space.
Any help would be appreciated!
– staging.wherearethosemorgans.com
Thanks very much,
Mark -
Hi Mark,
To make a full width layout, we would recommend setting the page’s content container to full width, so that the theme’s default spacing (margins/paddings) will not be applied.
You can set it in 2 ways:
1. For individual pages, you can do it via the layout metabox in the page editor:
https://docs.generatepress.com/article/layout-metabox-overview/#where-is-it2. For bulk editing, you can do it via a layout element:
https://docs.generatepress.com/article/layout-element-overview/To learn more about content container, check this：
https://docs.generatepress.com/article/content-container/Let me know if this helps!
-
Hi Ying,
Thanks for the info. I’ve got Full Width already set up, I just don’t know why there’s so much white space between the top of the hero image and the header.
It’s only happening on my homepage, so I’m not sure if I’m doing something with the padding that is causing the hero image to move so far down the page?
Are you able to see if I’m doing something to cause this on your end by any chance?
I will also try to play around a bit and see if I can figure it out.
Thank you,
Mark -
Hello again,
I think I’ve solved it.
I went to customize, layout, container and the top padding was set to 40 desktop and 30 mobile, so I changed those to 0 and it moved the homepage hero image way up on both devices.
I’ll mark this one as resolved.
Thanks!
Mark -
I’ve got Full Width already set up
No, you didn’t. You are using the align full option for containers, but the content container is not full width, it’s set to 2000px.
However, if you are happy with the current settings, then you can do so. But note that the customizer option is global, you change the settings there, you change it for the entire site.
-
Hi Ying,
I see now, thanks for explaining.
I went into layout, changed. the content container from default to full width and I saw that it made all the elements on my homepage stretch full screen. I’ve already set up all the elements how I’d like them to be, so I’ll leave that set to default now.
But is that what’s causing there to be a larger white space between the header and hero image? On customize -> layout -> container I changed padding top to 0 on both desktop and mobile. It looks great on desktop, but there’s still a gap on mobile but only on my homepage.
Is this something to do with the hero image? In my other ticket you just helped me get the words to appear on the image by setting Z index to 1, but I’d really like to get the image to move up the page slightly so the header appears in “the middle” of the top bar and the hero image.
Thanks again for all your help!
Mark -
Hi there,
to cover some basics with theme container widths and spacing.
The customizer allows you to set the Container width, Padding and Spacing.
By default this affects all templates, and it adds extra space between elements such as the header and the main container, which is where that extra space comes from.Now, when you build out a full width page, WordPress provides you the option to make blocks Full Width. Which is a CSS hacky method to overcome themes inline (left & right) padding and its container width.
But what it cannot remove is the other spacing.Now the ideal solution when building pages with full width content is to:
i) set the pages Content Container to Full Width:
https://docs.generatepress.com/article/content-container/Doing so not only makes the page container full width, ignoring the customizer width, it also removes all the padding and spacing.
ii) build out the page sections with Container Blocks
Which you have done so far.
And for each section you can define its Padding and if necessary add the Inner Container to keep content contained.
https://docs.generateblocks.com/article/add-inner-container/If you have the time, i would highly recommend doing the above method,
Let me know
-
Hi David,
That all makes sense, thanks for taking the time to explain.
I’ll take a look into doing that at some point before I make the site go live.
Thanks again!
Mark -
You’re welcome
- You must be logged in to reply to this topic.