I need to remove the empty space/section below my page

[danielhalond]

I followed a tutorial about smooth scrolling (weebly tricks) and a large blank space appeared below my page. It seems the code I wrote on the "scroll" theme I created is causing that. But the only solution I found is to delete it. I would like to ask for help please!

Thanks in advance

[Bernadette3]

Can you post a link to your site @danielhalond

[danielhalond]

Sure!

www.danielhalond.weebly.com

Thanks

[Bernadette3]

Hm.. I still see the large unused section at the bottom. Did you delete it and add it back in? We don't have a way of assisting with custom code but if it's just a small snippet you added someone on here may be able to help you out. I made a copy of your site and changed it to a standard Weebly theme and the section is no longer there. I think this means you are correct that something about the code you found is causing it. Can you also post a link to the tutorial you followed? That may be helpful as well. Thanks!

[danielhalond]

Yes, unfortunately, the code it seems the code I added is causing that. The part I edited was this one:

<div class="main-wrap">
<div class="container">
<div class="anchor"><h2><a name="home" class="anchor-link">{anchor-link-1:text}</a></h2></div>
<div class="anchor-content">{anchor-content-1:content}</div>
</div>
</div>

<div class="main-wrap">
<div class="container">
<div class="anchor"><h2><a name="recent" class="anchor-link">{anchor-link-2:text}</a></h2></div>
<div class="anchor-content">{anchor-content-2:content}</div>
</div>
</div>

<div class="main-wrap">
<div class="container">
<div class="anchor"><h2><a name="portfolio" class="anchor-link">{anchor-link-3:text}</a></h2></div>
<div class="anchor-content">{anchor-content-3:content}</div>
</div>
</div>

<div class="main-wrap">
<div class="container">
<div class="anchor"><h2><a name="about" class="anchor-link">{anchor-link-4:text}</a></h2></div>
<div class="anchor-content">{anchor-content-4:content}</div>
</div>
</div>

<div class="main-wrap">
<div class="container">
<div class="anchor"><h2><a name="contact" class="anchor-link">{anchor-link-5:text}</a></h2></div>
<div class="anchor-content">{anchor-content-5:content}</div>
</div>
</div>

[Adam7]

The classes used in your div tags probably have some padding or margins being applied by your site's CSS, since those are common class names used by the HTML templates of themes. I bet if you came up with some unique class names and styled them seperately it would fix it.

[danielhalond]

I renamed some of the classes (if I understood it correctly) and the empty space really reduced, but it is still there.

Thanks for the reply, Adam

[Adam7]

This might be a good question for @ThemezierThemes, since I'm not familiar with their tutorial (and it might make a nice addition to it).

[ThemezierThemes]

Thanks for the mention, @Adam!

@danielhalond The large gap at the bottom of your site is being caused by the CSS code "-160px" applied to the header tag, which is essentially pulling your content up 160 pixels, thus creating the void at the bottom of your page.

Additionally, I noticed your site has a <header> within a <header>, and the internal <header> also has a CSS code of "-120px", which is also adding to the void created at the bottom of the page.

Once I removed these 2 CSS codes from the 2 <header> tags within your site, the void or space at the bottom of the page disappears.

[danielhalond]

Thanks for the reply, Weeblytricks!

I tried removing the "-120px" part to test, that part I'm using to remove a gap on the top of the page. The -160px is doing the same. I was having this problem removing the gap, so I followed some tips. I believe this redundant right? I could use only one "-280 px"? So, essentially my problem is still the upper part of the page. How can I remove the gap without creating a gap below?

[ThemezierThemes]

You're welcome, @danielhalond!

Right, so removing the gap from the top has created one at the bottom -- the gap still exists, but just in a new location now.

Without actually looking at your site's coding, it's really hard to see how everything is working together efficiently, but from an external point -- and with both the "-120px" and "-160px" codes removed from the header -- the gap at the top is inherently caused by 3 things:

1. The "40px" bottom margin applied to the logo <div> (Doesn't seem to be in use)
2. The "60px 0px" padding of the CSS class ".cento-header"
3. The relative position of the ".sticky-wrapper" <div>, which houses the navigation, a fixed position <div>

[danielhalond]

Thank for the quick reply! I'm not familiar with coding, where can I find those items?

[ThemezierThemes · Accepted solution]

You are very welcome, @danielhalond!

Unfortunately, I don't feel comfortable providing code advice for this type of modification because of my external position. There's a risk the situation could be made worse.

My guess is some of these codes are located in your CSS file, but I suspect that some are being adding on via jQuery as well. Unless you're familiar with your site's coding, I would be absolutely sure of what you're changing. At the very minimum, save your code files to your computer first so you can revert back if you make a mistake.

[danielhalond]

No problem at all! Thanks for the help provided, @Bernadette @Adam @ThemezierThemes

I wish I knew how to code to dive in and try to solve this but unfortunately, this is not the case! Sorry about that, my friends!

I'll leave that thing like that, cause it's working as it is haha

Thanks again!

[afsalshameerrea]

Hi there

Will you please take a look at my site
www.websitebuilderinc.weebly.com? I'm also having a blank space at the bottom. When I used the Inspect element here is what I got



element.style {
min-height: 100%;
position: relative;
height: auto !important;
padding-bottom: 45px !important;
}



When I change "height: auto" to "height: 20 px" everything got to normal and the space was removed. How can I locate and change this height: auto in my theme editor and change it. I searched a lot and didn't find anything yet. Please do help.