Getting rid of blank space below footer in Mobile

Question

Client didn't want to have the responsiveness from the website, so we have totally removed responsiveness from the bootstrap based wordpress theme. Now the website is looking how it looks like in Desktop. However, on the cart page, as there are not much content or div elements, the page ends very soon, thus causing the white space which isn't looking good.

I've posted the screenshot below. There is fixed footer at the end, it is also not visible on that page. Any advice will be appreciated.

I've given these two in the header.

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="viewport" content="width=device-width" />

enter image description here

EDIT: Due to not having sufficient content on that particular website page mobile is displaying it's default behavior of showing white space. It could be solved by having min-height.

Do you want the visible footer (the black area above the white space) to become fixed to the bottom? — zgood, Mar 17 '15 at 03:37
Question EDITED: If you look at the other pages, you'll notice the difference. The fixed footer is already there but hidden in the above page but visible in other pages. — Shoeb Mirza, Mar 17 '15 at 07:43

score 0 · Answer 1 · answered Mar 19 '15 at 07:24

As you have mentioned the footer is positioned fixed, you need to set the bottom style property to 0 [bottom:0 !important], and you need to implement media-query in order to have it implemented only for mobile as it's only happening while opening website in mobile.

So i might consider adding following code in your custom.css

/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
/* Styles */
/* footer class or footer id */
.footer-class {
bottom: 0 !important;
}
}

score 0 · Answer 2 · answered Dec 05 '15 at 19:28

0

Check if there is a code (for example .js) that manipulates the view. In my case such a behaviour was caused by animations (bounceInUp, bounceInDown)

answered Dec 05 '15 at 19:28

Klapsa2503

829
10
33

Getting rid of blank space below footer in Mobile

2 Answers2