CODEWITHSUNDEEP
htmlcss
KreigD
KreigD

Reputation: 51

Finding and fixing giant white space at bottom of page

On this page https://fathercraft.soulheart.co/baby-essential-list/, I'm getting a huge white space at the bottom of the page. I can't find any obvious reason why, and I'm not getting it on my local development install or on any other page of the site.

I've used the devtools inspector to look through the DOM and can't find anything suspicious.

I've tried the basic * { border: 1px solid red; } technique, and nothing seems to be present below the body of my site. There's just an enormous white space down there. Maybe it could be JavaScript-related, but I'm not sure where that would be coming from.

I've reviewed all of the suggested "questions that may already have your answer" and they did not help. I appreciate any help you can give. I'm at a total loss here.

Upvotes: 0

Views: 51

Answers (2)

Levi Fuller
Levi Fuller

Reputation: 15771

A good way to quickly track down issues like this is to delete sections of HTML until your issue is disappears using your browser's developer tools window (often F12).

You can use CTRL/CMD+Z to undo a deletion then traverse down the tree, deleting its children to pin point it.

Also, if you can't find an issue by hovering over an element then the odds are that it's a before/after element, so you can start there.

enter image description here

Upvotes: 0

Brix Angeles
Brix Angeles

Reputation: 61

You have an image in .page-baby-essentials .accordion-content-section::before which is ./assets/images/rawpixel-604758-unsplash.png

Upvotes: 1

Related Questions