Quote box with nav arrows in fixed position plus scrolling issues

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.

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.

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

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

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!

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.

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.

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

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

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

Hi,

I am also following this thread to help you once you're able to provide a link to your website. The user above me is way beyond my expertise but I'll help if I can.

-Dan

On 10/22/2021 at 2:58 PM, bangank36 said:

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

Hi. Sorry for the delay.

https://cricket-seabass-6s5d.squarespace.com/

Test1234