[Resolved] Wide Empty Gap Between Footer and the Content on Homepage

[Darshil]

Hello,

The homepage of my website has a wide empty section between the 7 images and the footer. I tried to tinker with the footer padding setting in the Generatepress Pro Customisation but it did not fix the issue.

Please help me fix that.

PS: I copied a CSS code from a YouTube tutorial to create the hover text effect on the images. I guess that might be the culprit here.

I am sharing the link of my homepage + css code that I added on the images.

[David]

Hi there,

that CSS is adding a tonne of top and bottom padding to those elements which is creating the extra space.

Instead of switching padding to change the position – use a transform: translateY(400px); property to move them:

https://www.w3schools.com/css/css3_2dtransforms.asp

[Darshil]

Hi David,

Thanks for the response. Unfortunately, I am not well versed with CSS and coding. I just copy pasted the code from a YouTube tutorial to get the hover effect.

Can you please share which code I need to replace with the transform: translateY(400px); that you shared. I tried to paste your code directly to the custom css but it gave a red cross with error.

Error Image link – https://ibb.co/fCR5pzq

[Leo]

Are we talking about the Elementor content here?
https://www.screencast.com/t/TwR5xXItlIc

If so please check with their support team first.

We can only help with GP related questions here.

Thanks!

[Darshil]

Hi Leo,

I completely understand your concern and I know it might not be possible for you to diagnose and help with other plugins.

The issue is that there is a wide white gap between the images and the footer. Here’s the image for your perusal – https://ibb.co/nP8HMpG

The cause of the issue is the custom CSS code that I manually put from a YouTube Tutorial that affects the padding.

Here’s the code:

/* Wind */
.networking a {
        padding: 5px 20px;
    background: red;
    border-radius: 7px;
}

.networking {
 padding-top:400px;
 padding-bottom:300px; 
  transition-duration:0.30s;
}

.networking:hover {
   padding-top:40px;
 padding-bottom:300px;  
}

.solarimg {
 height:200px;
 overflow:hidden;
}

David mentioned that the code is adding extra layer to the top and bottom which is creating this wide gap. To fix the same he suggested to use the 

transform: translateY(400px);

Unfortunately, I am dumb when it comes to understanding CSS, so I do not know how to use the transform code. I tried pasting the code in the additional css but it is showing an error – https://ibb.co/fCR5pzq

If the spacing glitch was due to an elementor’s functionality then I would have surely contacted them, but as the spacing glitch is because of an additional CSS code that I added to the generate press theme. Plus even the footer padding feature in the generate press pro customizer could not fix this issue.

Thank you for your time, please help me out with this.

[Leo]

The scope of this forum is to help with GP related issue and we cannot help with custom solutions that you found online, which is applying to content from Elementor.

The spacing glitch is due to the CSS you’ve added and it’s not related to the GeneratePress theme – The same glitch would happen regardless which theme you are using.

Instead of finding a random solution that doesn’t seem to work well on YouTube, I would recommend checking with Elementor’s support to see if they are able to point you in the right direction to achieve what you are looking to do. They should have a better idea as the effects are applying to their content.

Thanks for your understanding.

[Darshil]

No worries Leo,

Thank you.

[Leo]

Thank you!

[Author]

Posts