Hi, I’ve got some white space below my header and the first section of content on my homepage. See attached. Also, I can’t seem to get my page to go the full width of my website. The header and footer do, but the page content doesn’t.
Thanks for the help.
Hello Matthew,
Thanks for writing in!
Please check your section. You may need to delete the default padding of 45 pixels. By the way, we could not check your site because it is under construction mode. I was able to login using the old credentials you have shared in the past.
I went ahead and resolved your issue. It turns out that you are using Layout - Fullwidth page template. To eliminate the spaces which is the content container, I change the page template to Blank - No Container | Header, Footer. To know more about the different page templates in the theme, please check this out:
Kindly check your site now.
Hi Rue,
Thanks for the help. I can still see some white space, at the sides and top. Can I remove those? 
Hello Matthew,
Would you mind providing us with the admin access to your site in a Secure Note because your site is under a coming soon page so that we can check:
Hi, see the secure note.
Also, if I want to add other section which butt up to the sides and the top/bottom how do I do it? I see you did it for the top but what you did should stop it happening again but it doesn’t seem to.
Hello Matthew,
You have added a section and an image element. Please do not expect the image to go fullwidth because it is just an image element. The maximum width of the image will depend on the dimension of the uploaded image. If you want to display a fullwidth image, please use it as a section background image instead.
I have created a test page for your that will showcase how the background image will be displayed when you apply it to a section. Off course, I have setup a gap element in one of the column to create some space for the background image to display.
Check the test page I have added in the secure note. I have also create another section that only involves a background color, a background separator and headline elements to display the text contents.
Hi Rue,
Sorry I don’t quite understand. I’ve gone into Section, clicked Advanced and added it as a Background Lower Layer, but this doesn’t remove the spacing and then when I’ve saved and go back to the Section, Advanced, background Lower Layer the image isn’t there any more but shows up. Am I doing it wrong? Ideally I’d like to use the plugin LayerSliderWP for the header but when I tried that didn’t stretch across the screen too.
If you have the steps to follow to remove all the white space (there is still a line at the top) and get the image to go across the entire screen I’d love to have a read.
Hi Matthew,
Ok read this; first is regarding this image:
This image will not work as a background-image because it has text, background-images naturally cut-off on the small screens and so does the text that you embedded to it. Please remove this image from being a background add it as an Image element instead.
Make that image 1920px in width so it can cover even the bigger screens.
Another thing with that image is it has a transparent 1px area top and bottom, that is what the white line that we are seeing.
You would not able to see this 1px transparent area unless you open that image on an image editor (e.g. Photoshop), please edit that image and crop those 1px transparent top and bottom area, same goes for the image on the footer/bottom area.
Now to your other question, how to make a section full width and no padding. Please inspect the section and press the Remove Spacing option.
Hope it helps,
Cheers!
It didn’t work. I ended up removing the second blue box as I couldn’t get it to fit properly. I’ve extended the size of the header image and now it won’t stretch all the way across my screen. And the white line is still there (I cropped it, nothing changed).
Hello Matthew,
Your image were not cropped. The image width is 1500 so the image will only display 1500 pixels in the section. If you want to display it as wide as your browser, you will need to click the image element. In the image element settings, find the “Customize” tab and insert this inline element css:
$el img{
min-width: 100%;
}
Please check out the home copy as an example.
Hi,
I cropped them as you asked, so I’m not sure why it is showing up as not doing as such. The image width is 1920px (I made them that width) unless you mean in the settings it is 1500.
Hello Matthew,
I have checked your homepage. The image is now fullwidth. As soon as you resize your browser screen, it resizes itself without cutting off the image. This means that the custom inline element css I gave is working.
Are you expecting any other behavior or something for the image to display?
Thanks.
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.