Jump to content

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

Go to solution Solved by tuanphan,

Recommended Posts

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

Capture d’écran 2023-09-19 à 17.32.37.png

Capture d’écran 2023-09-19 à 17.32.54.png

Edited by AlexandreABC
Adding screen-shots
Link to comment
  • Replies 9
  • Views 3.1k
  • Created
  • Last Reply

Top Posters In This Topic

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)

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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

 

Capture d’écran 2023-09-27 à 11.24.24.png

Link to comment
  • 2 weeks later...
  • 3 months later...
On 9/22/2023 at 9: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

Hi, can you please send me the link to this case you solved "page with logo (top), middle (form block), bottom (text links) always on screen"?

Thanks, Alice

Link to comment
On 1/31/2024 at 8:50 PM, aliceb012 said:

Hi, can you please send me the link to this case you solved "page with logo (top), middle (form block), bottom (text links) always on screen"?

Thanks, Alice

I don't remember url.

If you have same problem, you can share site url, I can check & give the code

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.