Jump to content

Quote box with nav arrows in fixed position plus scrolling issues

Recommended Posts

HI All,

Squarespace newbie trying to figure out how to create a portfolio of work which is a full page image with a description box about the project. The description box also has navigation arrows to go to the next project which is on a new section. I was hoping to have side horizontal scrolling but currently have scrolling up and down.

I have managed to work out how to add a code block with text and arrows but it is a bit clunky. Would be good if the box could stay in the top left. I would also like it if on the mobile version the box was at the top and the image underneath instead of the box over the top.

858780358_Screenshot2021-10-22at08_40_03.thumb.png.524545d636d1522f3515f95197741284.png

The arrows seem to be a bit hit and miss. Sometimes they work and sometimes they don't. Sometimes the page scroll has a mind of its own and starts going up and down!

I created the arrows by adding a markdown, linking the image and then copying the below code.

443950543_Screenshot2021-10-21at17_31_52.png.553bff02bc7f51545d4e9a63cdc32bfb.png

![uparrowtint](/s/noun_up-arrow_61411-tin-01.svg)

Then I right-clicked the image and copied the address into my code block

75312992_Screenshot2021-10-22at08_49_22.png.5cd3223b566ff43bbb88dac0102aaa81.png

I got the section ID's and added to scroll to the next section.

I added the smooth scroll CSS. This only appears to work in Chrome and not Safari and one of my clients uses Safari so would be good to work out why this is not working?

Quote

html {
scroll-behavior: smooth;
}

 

When I clicked the arrows to go to the next section it would go to the next section but align to the top of the description box and not the background image. Not sure why? I added the Scrollify plugin to Code Injection header from this link:

 

Now the page scrolls to the next project and moves to show the top of the image but is not right. It sort of moves to the top of the description box and then moves down.

 

Sorry for the long post. Any help would be great!

 

Edited by YogiX
Link to comment
  • Replies 3
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

5 hours ago, YogiX said:

HI All,

Squarespace newbie trying to figure out how to create a portfolio of work which is a full page image with a description box about the project. The description box also has navigation arrows to go to the next project which is on a new section. I was hoping to have side horizontal scrolling but currently have scrolling up and down.

I have managed to work out how to add a code block with text and arrows but it is a bit clunky. Would be good if the box could stay in the top left. I would also like it if on the mobile version the box was at the top and the image underneath instead of the box over the top.

858780358_Screenshot2021-10-22at08_40_03.thumb.png.524545d636d1522f3515f95197741284.png

The arrows seem to be a bit hit and miss. Sometimes they work and sometimes they don't. Sometimes the page scroll has a mind of its own and starts going up and down!

I created the arrows by adding a markdown, linking the image and then copying the below code.

443950543_Screenshot2021-10-21at17_31_52.png.553bff02bc7f51545d4e9a63cdc32bfb.png

![uparrowtint](/s/noun_up-arrow_61411-tin-01.svg)

Then I right-clicked the image and copied the address into my code block

75312992_Screenshot2021-10-22at08_49_22.png.5cd3223b566ff43bbb88dac0102aaa81.png

I got the section ID's and added to scroll to the next section.

I added the smooth scroll CSS. This only appears to work in Chrome and not Safari and one of my clients uses Safari so would be good to work out why this is not working?

 

When I clicked the arrows to go to the next section it would go to the next section but align to the top of the description box and not the background image. Not sure why? I added the Scrollify plugin to Code Injection header from this link:

 

Now the page scrolls to the next project and moves to show the top of the image but is not right. It sort of moves to the top of the description box and then moves down.

 

Sorry for the long post. Any help would be great!

 

Kindly share your site with the protected password to figure out your issues and find the solutions for them

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
  • 2 weeks later...

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.