Is there a way to lock all items to fit on the home screen and make it so nobody ever has to scroll?

The website I'm building (unfortunately I'm not able to give a url), has 5 sections to it.
On the home page I want the name of each section with an image behind it. Basically what I want is for all 5 images to be visible on the page so that visitors don't need to scroll down at all.
I can just adjust the sizes to make it fit on my screen, but as soon as someone else goes on the website to approve the draft, it doesn't work because their laptop has a different size screen.

You would need to provide a URL or some screenshots to be able to get some meaningful advice here, it's far too abstract currently.

You can use code to disable scrolling and hide any overflow.

On 1/27/2023 at 8:50 PM, Ziggy said:

You would need to provide a URL or some screenshots to be able to get some meaningful advice here, it's far too abstract currently.

You can use code to disable scrolling and hide any overflow.

Hi Ziggy,

Here's a test site I created to help describe how it looks:
https://celery-mauve-8hk8.squarespace.com/config/
Password: loftyhouses

Basically I want the six images and text boxes to always stretch to fill the height of the users window (except for on mobile).
I've put a code block in there that disables the footer on the home page, so when I extend the height of my window there's just white space below the images.
Is there a way to anchor the bottom of the image box to the bottom of the window or something like that?

You could force it with CSS like this:

@media only screen and (min-width:768px) {
  #collection-63d72aa5784862156934396a {
    #siteWrapper {
      max-height: 100vh;
      overflow: hidden;
    }
  }
}