Ask your WordPress questions! Pay money and get answers fast! (more info)

Getting rid of blank space below footer in Mobile WordPress

  • SOLVED

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 (/basket) and many other pages, as there are not much content or div elements, the page ends very soon, thus causing the white space which isn't looking good.

Here is the [[LINK href="http://i.stack.imgur.com/WraTw.png"]]screenshot[[/LINK]]. There is fixed footer at the end, it is also not visible on that page. Any advice will be appreciated.

Please take a look at the website [[LINK href="http://mika-couture.com/"]]here[[/LINK]]

Answers (2)

2015-03-20

Sachindra Narayan answers:

hi Shoeb, the issue is there is no content on the page bcoz of which the white space at the bottom gets prominent.. one possible solution can be that lets create a minimum height for the inner block which contains the cart information.. and hence the page shows atleast that much height which loading..

.content-block .container{min-height:500px;}

2015-03-20

Andrea P answers:

I don't understand why would you decide to switch off the responsiveness if you have a site which is made with bootstrap. especially considering that google declared they will hardly penalize not responsive sites starting from April.
also, I don't understand why if the client doesn't want the site to be responsive, they actually care about how some pages look on tablets and mobiles. I mean, the other pages will look crap anyway, as they will be zoomed out and visitors will have to pinch it to zoom in and read, etc..

after that said, I don't think that Sachindra solution would work, because the point is that the html body is actually more than 500px tall, but it is zoomed out, in order to fit the fixed width within the screen. because of the zoom keeping the proportions, the height is reduced as well, and it looks like if it was 200px tall.
so the only way to achieve something like that, would be to set the minimum height to something rediculously high like 800-1000px. also. you'd set it to do it only on smaller screens, something like:

@media screen and (max-width:980px){
.content-block .container{min-height:800px;}
}

there's no need to say that pages would look bad anyway, because instead of having the white space below the footer, you will have it above.


Shoeb mirza comments:

Is their any possible to making the page good by applying your code?


Andrea P comments:

Hi Shoeb,

I am sorry but there is no way to make a not-responsive page to look good on mobiles/tablets. especially in the case of pages which have bigger width than height.

but as I said, I don't understand why you would decide to block the responsiveness of bootstrap. my suggestion is to undo your edits which block the responsiveness, and work to sort the glitches that probably have pushed you to decide to cut off the responsive behaviour

I suppose you had some kind of problem which was breaking the layout when going responsive, and so you've decided to stop it. I think you should rather work to fix those problems, in order to have a good responsiveness.

if you want you can contact me in private and explain which was this issue, so I can see if I can help you.

cheers!


Shoeb mirza comments:

Well,

My issue wasn't solved. However from the responses I got that it is not possible to make good page layout. min:height:xxxpx will not do the job.

Thanks