Jump to content

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

Recommended Posts

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.

 

Link to comment
  • Replies 3
  • Created
  • Last Reply

Top Posters In This Topic

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.

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 

  Did I help? Buy me a coffee?

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

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

Link to comment

You could force it with CSS like this:

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

 

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 

  Did I help? Buy me a coffee?

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

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.