Mobile Chrome and Safari bar create unwanted space

[richardcech]

Hello,
I used this your code from this topic http://seatheme.net/forums/topic/mobile-chrome-and-safari-bar-create-unwanted-space/ and it works 🙂 but…
the page aligns correctly but creates too much space under the footer. Could this space be somehow removed so that the page is centered and ends in the footer and there is no possibility to scroll under the footer?

My web page is richardcech.com

Thank you very much
Best Regards
Richard Cech

[SeaTheme]

Hi,

 but…
the page aligns correctly but creates too much space under the footer. 

The space is from your CSS code:
https://www.dropbox.com/s/ai6tbcpi2pqsfu2/qq20210525-094143.jpg?dl=0

---

Regards!
SeaTheme – FAQs – Twitter – Facebook

[richardcech]

Hello,
this is not a problem…

in this topic we have set that the slider counts on the height without the top and bottom line of the google chrome browser (top line for search and bottom line for moving forward and backward in the browser)
http://seatheme.net/forums/topic/mobile-chrome-and-safari-bar-create-unwanted-space/

I think that the slider does not count on these lines of the browser, but the loading of the page does, and it places this space below the footer

I think the solution might be to subtract these lines from the full page view. Something like this topic minus the top and bottom rows of the browser
http://seatheme.net/forums/topic/page-with-footer/

I’m attaching pictures from the dropbox for a better explanation of the problem. Image is with my comment and ideas 🙂
https://www.dropbox.com/sh/rg1uewbsl08l4zn/AABCNZfMPfkT6QraHy45i4cza?dl=0

Thank you very much for your effort
Best Regards
Richard Cech

[SeaTheme]

Please add the custom CSS:

@media (max-width: 767px) {
  #wrap {
  min-height:  calc(var(--get-win-height, 100vh) - var(--header-height-mobile, 140px));
 }
}

---

Regards!
SeaTheme – FAQs – Twitter – Facebook

[richardcech]

Works perfectly !!!!!!
Thank you very much
Best Regards
Richard Cech

[SeaTheme]

Please update the CSS as:

@media (max-width: 767px) {
  .home #wrap {
  min-height:  calc(var(--get-win-height, 100vh) - var(--header-height-mobile, 140px));
 }
}

Or it will affect other pages

---

Regards!
SeaTheme – FAQs – Twitter – Facebook

[richardcech]

ok 🙂 thank you
Best Regards
Richard Cech

[Author]

Posts