Linking banner images to separate pages

Site URL: https://strawberry-octagon-l8ej.squarespace.com/config/pages

Is it possible to link different banner images on a main navigation page to separate pages on my site? As you can see from the screenshot I have several projects displayed for each banner image and would like these to direct the user to the relevant separate pages when clicked on.

If anyone knows how to do this or has some code that would make this possible please?

Hi. Your site is private. Can you setup password & share url again? We can check easier

1 hour ago, tuanphan said:

Hi. Your site is private. Can you setup password & share url again? We can check easier

Sorry this should be fixed now I've upgraded my subscription and made the site public.

https://strawberry-octagon-l8ej.squarespace.com/config/settings/domains/jessclarkdesign.com

19 hours ago, jessclark98 said:

 

Sorry this should be fixed now I've upgraded my subscription and made the site public.

https://strawberry-octagon-l8ej.squarespace.com/config/settings/domains/jessclarkdesign.com

Hi. Why don't use Image Blocks? You can add image, links?

On 6/11/2021 at 7:03 AM, tuanphan said:

Hi. Why don't use Image Blocks? You can add image, links?

 

Okay I've tried this with gallery images and it works thank you, do you have any code that would allow me to change the images for mobile use like I did with the previous banners please?

On 6/12/2021 at 4:40 PM, jessclark98 said:

Okay I've tried this with gallery images and it works thank you, do you have any code that would allow me to change the images for mobile use like I did with the previous banners please?

You mean resize image on mobile??

On 6/14/2021 at 5:32 AM, tuanphan said:

You mean resize image on mobile??

Yes resize, but more so like how I did this previously with banner images? So when the image is viewed on mobile a different image is used?

23 hours ago, jessclark98 said:

Yes resize, but more so like how I did this previously with banner images? So when the image is viewed on mobile a different image is used?

 

You can add more images on desktop. Then let me know. We will give the code to show 1 image on desktop, show another on mobile.

3 minutes ago, tuanphan said:

You can add more images on desktop. Then let me know. We will give the code to show 1 image on desktop, show another on mobile.

All the images I want to change can be found on the 'new page' section of my site, as I've linked these to the separate pages. https://strawberry-octagon-l8ej.squarespace.com/config/pages

I've used gallery images for each project to allow me to get a similar size image for each section and removed the arrows so it's only the one image for each.

This is the code I previously used when I did this for banner images. Is there some similar code that allows this to work for gallery images?

@media only screen and (max-width: 640px){

#page .page-section:nth-child(1)
   .section-background img {
  opacity:0 
   }
#page .page-section:nth-child(1)
   .section-background {
background-image: url(https://static1.squarespace.com/static/607fd834cc2b3d1c6038d54a/t/608175fa695dc47c58640bb7/1619097084730/studysuite+mobile+banner+ai.png);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
}

18 hours ago, jessclark98 said:

All the images I want to change can be found on the 'new page' section of my site, as I've linked these to the separate pages. https://strawberry-octagon-l8ej.squarespace.com/config/pages

I've used gallery images for each project to allow me to get a similar size image for each section and removed the arrows so it's only the one image for each.

This is the code I previously used when I did this for banner images. Is there some similar code that allows this to work for gallery images?

 

@media only screen and (max-width: 640px){

#page .page-section:nth-child(1)
   .section-background img {
  opacity:0 
   }
#page .page-section:nth-child(1)
   .section-background {
background-image: url(https://static1.squarespace.com/static/607fd834cc2b3d1c6038d54a/t/608175fa695dc47c58640bb7/1619097084730/studysuite+mobile+banner+ai.png);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
}

/config is admin url. We can't access it.

See how to find page url.

5 hours ago, tuanphan said:

/config is admin url. We can't access it.

See how to find page url.

Its set as my homepage on https://www.jessclarkdesign.com/

20 hours ago, jessclark98 said:

Its set as my homepage on https://www.jessclarkdesign.com/

I see you changed mobile image. Did you solve this?