Making the Web-Page Full-Screen, across all resolutions

Hello everyone,

I hope to find you well,

I would like to find a solution on the following matter:

I have a few pages which are unique (i.e. only include one block, like the home-page);

I would like to make these pages full-screen in all cases moving the resolution of my web-page, without any needs to scroll with the mouse, both on computer and telephone, including the footer at the bottom of the page;

You can see on pictures the difference once I move the resolution, sometimes the footer shows, sometimes not...;

Can you share any CSS with me, working both on computer and smartphone, including the footer, and applying only to such selected pages?

Thanks a lot for your help!

Regards,

Alexandre

Hi,

What is page url? We can check easier

Recently I solved a similar case, page with logo (top), middle (form block), bottom (text links) always on screen

Dear tuznphan,

On 9/22/2023 at 2:52 AM, tuanphan said:

Hi,

What is page url? We can check easier

Recently I solved a similar case, page with logo (top), middle (form block), bottom (text links) always on screen

Hello!

Sorry for the late reply, I forgot to turn on notifications;

https://global-queens.com

Thanks a lot!

Alex

Hello again,

I would also love to know it this is possible to apply this request for the mobile version too?

Cheers,

Alex

On 9/25/2023 at 5:05 AM, AlexandreABC said:

Dear tuznphan,

Hello!

Sorry for the late reply, I forgot to turn on notifications;

https://global-queens.com

Thanks a lot!

Alex

 

Try adding this code to Website > Website Tools (under Not Linked) > Custom CSS

body.homepage article section {
    min-height: unset !important;
    height: calc(~"100vh - 90px") !important;
}
body.homepage {
    overflow: hidden;
}

(Sometimes the code won't run on Edit Mode)

8 hours ago, tuanphan said:

Try adding this code to Website > Website Tools (under Not Linked) > Custom CSS

body.homepage article section {
    min-height: unset !important;
    height: calc(~"100vh - 90px") !important;
}
body.homepage {
    overflow: hidden;
}

(Sometimes the code won't run on Edit Mode)

Thank you for your reply!

It seems not to work super well, as moving the resolution of the page will lead to misformating the page (screenshot), so I decided to delete the CSS. Any other suggestions?

(i) Can I choose to apply for it for other pages, and if so how? (e.g. The FAQ page)

(ii) If it works, how to apply it for the mobile version?

I think - relatively to my poor knowledge of website-building - that the solution may not be a CSS of the whole page, but rather a CSS to obtain a flexible section (decreasing/increasing in size) and a fixed footer (always showing) whilst changing the resolution of the page, if that is clear?

Anyways, the goal is to get everything showing in the one-section pages, across all resolutions;

Thanks a lot for your help!

Alex

Works! Thanks a lot!