Jump to content

Transparent Nav on Image Gallery

Recommended Posts

Site URL: https://tangerine-iguana-kwg3.squarespace.com/

Hello there, 

I was hoping to get some help in a couple of areas within the header:
- I have an image gallery on the homepage and for some reason the nav is no longer transparent above the gallery, but it is on my other pages. Is there a way to get the image gallery to be full bleed? It looks like the issue is the spacing as it is placed below the nav, unlike other full bleed content.

- Additionally, I was also trying to find a way to have an alternate header image show up on mobile vs. desktop as the gallery images gets cropped significantly. Unsure if there is a solve for this, but thought to ask regardless, thanks a lot! 

https://tangerine-iguana-kwg3.squarespace.com/

Password: MaintainS134!

Link to comment
  • Replies 4
  • Views 915
  • Created
  • Last Reply

Is this what you want, let's copy the custom css in place

image.thumb.png.4d83bdb4222299acffca32fa27520494.png

section[data-section-id="5faddfad2bb93a1ea28b510b"] {
  padding-top: 0 !important;
}

 

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
19 minutes ago, Sera said:

Fantastic, thank you so much! This is exactly what I needed.

And as far as using an alternate image in Mobile view, is that possible at all? 

Thanks again,

Anna

 

the selectors for 1st 2nd 3rd is from top to bottom, kindly replace your own images

image.thumb.png.7e6b5d2769061f52b47aa1b6ebf4340e.png

section[data-section-id="5faddfad2bb93a1ea28b510b"] {
  padding-top: 0 !important;
}

@media only screen and (max-width: 768px) {
  section[data-section-id="5faddfad2bb93a1ea28b510b"] .gallery-fullscreen-slideshow-item-img img {
  display: none;
}
section[data-section-id="5faddfad2bb93a1ea28b510b"] .gallery-fullscreen-slideshow-list .gallery-fullscreen-slideshow-item:nth-child(1) .gallery-fullscreen-slideshow-item-img {
    background: url(https://placeimg.com/640/480/any) no-repeat;
    background-size: cover;
  }
section[data-section-id="5faddfad2bb93a1ea28b510b"] .gallery-fullscreen-slideshow-list .gallery-fullscreen-slideshow-item:nth-child(2) .gallery-fullscreen-slideshow-item-img {
    background: url(https://placeimg.com/640/480/any) no-repeat;
    background-size: cover;
  }
section[data-section-id="5faddfad2bb93a1ea28b510b"] .gallery-fullscreen-slideshow-list .gallery-fullscreen-slideshow-item:nth-child(3) .gallery-fullscreen-slideshow-item-img {
    background: url(https://placeimg.com/640/480/any) no-repeat;
    background-size: cover;
  }
}

 

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • 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.