Footer at the bottom even if page doesn’t have enough content

Hi, how to do this? I have a page with only a couple of lines of content and I want the footer to be pushed to the bottom (see screenshot)

Attachments:

You must be logged in to view attached files.

Hello,

Please insert the site admin access into the Private content below the message area. We will take a closer look at the case.

Best Regards

I get the same issue

The page with a problem is named “Nemokamas pristatymas”. Thank you!

Hello,

I am checking the page and I cannot catch the problem: https://gyazo.com/9b8fa7162128a200fc23bfa75181fade

What device and browser do you use to view the page?

Best Regard

i think this often happens when the website is shown on a large screen usually around 1920×1080 or zoomed out using the browser such as chrome , firefox etc. The issue doesn’t go away even if you set each top and bottom section to -40px

Hello,

I have checked the site on 1920×1080. Most likely you zoom out and in. Please check the site on real devices and let us know if there are any problems. In addition, please inform the devise and browser you have faced the problem.

If you have any questions please feel free to contact us.

Best Regards

Device is win10 desktop pc, browser – chrome. I’m not zoomed in or out, it’s 100%. My screen resolution is 3440 x 1440 if that’s relevant. Checked on another browser on the same device and on another device with lower resolution – the same problem.

Attachments:

You must be logged in to view attached files.

Hello,

This screen resolution is not common, and WoodMart design is based on default screen size.

Please add this code to the Theme Settings > Custom CSS > Global:

@media screen and (min-width:2000px){
body .main-page-wrapper {
    min-height: 83vh;
}
}

Best Regards

Thank you for the solution, but I’m afraid it doesn’t work. Now the footer is almost hidden. Is it possible to make the footer always fit to the exact bottom?

Attachments:

You must be logged in to view attached files.

Hello,

Unfortunately, it is not possible to do with one solution only.

Please remove the code I provided and try this code with this one:

:root {
	--custom-header-height: 157px;
	--custom-footer-height: 63px;
}

@media (min-width: 1024px){

body .main-page-wrapper {
min-height: calc(100vh - var(--wd-admin-bar-h) - var(--custom-header-height) - var(--custom-footer-height));
	}
}

If you change the header and or footer height, you will need to correct the code accordingly.

Best Regards

[Author]

Posts