Hi
I have a fairly lengthy page of content on my website (footballandthefirstworldwar.com) that has a html table in it (a database), and it ends as a normal post would, just above the footer.
However when I view it on mobile devices, in responsive mode, the page ends before the content is finished and it runs right down over the footer. I have tried to change the box dimensions, but the only way to get it to fit properly on mobile devices is to leave a big gap at the bottom on the desktop mode. This is obviously unsightly and not ideal.
Is there any way of making the responsive page template finish when the content ends? Does it currently have a set dimension that can be changed so more content can fit on it?
Here is the URL of the page in question http://www.footballandthefirstworldwar.com/footballers-killed-first-world-war/
As you can see, there is a huge gap at the bottom of the page when viewed on a desktop/laptop/
Many thanks
Hi Iain
Tables do have the power to extend beyond page containers. Do you have access to the HTML of this table? There is a set width and height there that should ideally be removed:
Can become:
Then on mobile the table just runs out of space. Even if we drop the #main div padding down to 5px on mobile and the table font size down to 10px we still don’t have a fit:
/* Vantage Mobile */ @media screen and (max-width: 680px) { #main { padding: 5px; } .entry-content table td { font-size: 10px; } }I’m afraid I don’t have any solution that I can think of here. You could potentially have different items on different lines but it would take some time to figure that all out. It might just be better to hide this table on mobile.
/* Vantage Mobile */ @media screen and (max-width: 680px) { .page-id-4973 .entry-content table display: none; } }Wow that was easy enough – the first suggestion worked straight away.
Many thanks for your help!
Iain
Super, glad we could help.