Footer

[richardcech]

Hello,

Is it possible to set the footer to always be at the bottom of the screen? when I set the footer overlay, this causes a problem for the home page and the project page, so that the footer starts to overlap with the content somewhere in the middle of the page. On the page about and contact it works well,… (maybe footer overlay have some issues with understanding of end of grid and end of slider,…)

My web page is: richardcech.com

Thank you very much
Best Regards

Richard Cech

[SeaTheme]

Hi,

Please paste the custom CSS code to “Appearance > Customize: Additional CSS”:

.footer-overlay #footer { 
    z-index: 1;
}

Regards!

SeaTheme – SeaTheme.net – Twitter – Facebook

[richardcech]

Hello,
I’ve tried your solution but it still doesn’t work.
My point is that the footer would be always placed at the bottom (on the computer and on the phone, I feel like it only works on one thing at a time), so that it never cuts the content but is always under the content. It occurs to me that if there is more content and I have to scroll down, the footer is positioned correctly, but if there is less, it causes problems. To make it more clear, I painted the footer blue. You should also have my login information on my wordpress. I also noticed that the footer is affected by the setting when footer overlay is on or off.

I have these page which is important for web page like template.
Home page: richardcech.com
Project page: richardcech.com/projects
About me: richardcech.com/about-me
Contact: richardcech.com/contact
and template page for projects: richardcech.com/ux-portfolio/brno-island

Best Regards
Richard

[SeaTheme]

Hi,

I don’t know if understand your requirement.
Do you mean that you want to the header+content+footer stay on the same screen? (without scrolling bar).
It is possible for the homepage, but it is not suitable. The content of other pages is too high to stay in one screen.

For the homepage, I found there is CSS for slider height 77vh, please change as:

@media(min-width:768px){
.module-id-1598855720568 .slider-mod-wrap.slider-style3, .module-id-1598855720568 .slider-mod-wrap.slider-style3 .owl-carousel .owl-item img { height: calc(100vh - 70px - var(--header-height)); }
}

If I misunderstood your question. Please give me more tips. (better paste some screenshots to explain)

Best

[Author]

Posts