Consistent full screen Website display on all devices

[Fred]

Hello,

I have a similar problem to Mizan who reported in March that he had white space at the bottom of his webpage when displayed on a wide screen.  There wasn’t any detail on how this was resolved.

My website displays at full screen on a laptop, phone and tablet but when displayed on a 24 inch PC display (1920 x 1080) with full screen for all sites and apps turned on, the black Footer line is displayed half way up the screen.  This issue doesn’t occur with any other website.

I can’t see any settings in the Theme customisation or Page edit that will resolve this.

Would be grateful for your advice.

Many thanks (again).

Fred

[Yazmin]

Hi, I’m not completely sure what the issue is.
Is the footer always half the way up the screen on all pages of your site?
Is the footer being displayed across/overlapping your page content?
Do you have a URL I can take a look at to see this problem?

[Fred]

Many thanks for responding, Yasmin.  My site is under development so I don’t wish to make it visible yet.

More research seems to indicate that this ‘how to stick the footer to the bottom of the page’ issue is more of a WordPress rather than a theme issue.

Any ideas would be gratefully received.  If none forthcoming, will consider this matter resolved from the UXL perspective.

Thanks again,

Fred

[Andy]

Hello Fred, after giving this much thought, we think we know what the issue is. Please correct me if we have this wrong.

The Exoplanet theme displays the footer immediately after the end of the page content, but you are looking to peg the footer to the absolute bottom of the screen, even when the page content is minimal or with not so much height, so you would see white space between the page content and the footer.

To accomplish this, can you please try adding the following to Customize > Additional CSS:

html, body {
    height: 100%;
}
#page {
    display: table;
    width: 100%;
    height: 100%;
}
#content {
    height: auto;
}
#colophon {
    display: table-row;
    height: 1px;
}

Please let me know whether this works or not.

Andy

[Fred]

Hello Andy,

It worked!  Excellent!

Really appreciate the support from you and the team with resolving this issue.

Many thanks,

Fred

[Andy]

Thanks for getting back to me and letting me know it works.

If you notice some weird behavior on smaller screens, you may need to also add this snippet of CSS

@media screen and (max-width: 1120px) {
    #page {
        display: block;
    }
    #colophon {
        display: block;
        height: auto;
    }
}

[Fred]

Hello Andy,

I’m sorry for the delayed response.

Many thanks for sending the additional css.

At the moment I haven’t noticed any untoward behaviour on small screens but it’s great to know I have something in my back pocket if it’s needed.

Greatly appreciate the help and support.

Fred

[Andy]

We’re please to say that the latest versions of Exoplanet and Exoplanet Pro now feature the sticky footer as described in this support topic, and it works across all screen sizes too.

[Author]

Posts