Jump to content

Adding vertical scroll to a block containing a long image

Recommended Posts

Hi everyone. After searching high and low for answers, I am appealing to the forum to try to get an answer. I am working in Squarespace 7.1 and just trying to add a basic vertical scroll to my image. My code is this: 

#block-yui_3_17_2_1_1696542988516_10112 {
  height: 50vh;
  max-width: 80%;
  margin:auto;
  width: 100%;
  overflow-y: scroll;
  filter: drop-shadow(2px 22px 40px rgba(0,0,0,.3));
  
  @media screen and (max-width:767px) {
   height:200px;
  }
}

No matter how many things I have tried, I cannot seem to get a vertical scroll to show up. I have tried setting the design of the image block as both "fit" and "fill",  taken the advice of Creedon in this thread  by starting over with a new image block and not resizing it using the handles, and dug deep on stack overflow.  I've tried `overflow: auto` as well as `overflow: scroll`, setting a height before & after calling overflow-y in the code block, and a million other small things- nothing seems to make a difference. 


The tutorials and resources I found are here:
 

https://www.primitusconsultancy.co.uk/blog/how-to-add-a-full-scrollable-website-page-on-squarespace

 

https://www.thesquaregenius.com/squarespace-tips/add-a-scrollable-website-image-block-to-squarespace

Has something changed lately that would prevent this VERY simple code from working? I'm completely burnt trying to solve such a simple thing.

Attaching my image below- it is much larger than would be necessary for an overflow to apply 

DanielYoungDACap.png

Link to comment
  • Replies 3
  • Views 1.6k
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

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.