7.1 Gallery Slideshow Header Transparent

Has anyone figured out how to have a gallery block with a transparent overlay header on a 7.1 site? I've seen lots of discussions but haven't seen anyone actually pull it off. Help!

Hi,

Can you share link to page where you use gallery block? We can check easier

On 7/21/2023 at 10:19 PM, tuanphan said:

Hi,

Can you share link to page where you use gallery block? We can check easier

Well, I can't get it to work well so I don't have a page to really show you. But, for instance on this page (https://atltrinity.org/gallery-test) I'd love for the images to tuck up under the logo and hamburger transparently and be flush with the top of the page. I'd also like for the gallery to be responsive and adjust when viewed on mobile.

Thanks! 

On 7/25/2023 at 3:16 AM, benjaminparks said:

Well, I can't get it to work well so I don't have a page to really show you. But, for instance on this page (https://atltrinity.org/gallery-test) I'd love for the images to tuck up under the logo and hamburger transparently and be flush with the top of the page. I'd also like for the gallery to be responsive and adjust when viewed on mobile.

Thanks! 

Add to Design > Custom CSS

/* Gallery test page */
body#collection-64bed9575161630bdb2bb868 article section:first-child {
    padding-top: 0px !important;
}

Mobile is fine to me.

@tuanphan that's basically what I've tried. It basically works on desktop, but doesn't scale well on mobile. See the screenshot.

12 hours ago, benjaminparks said:

@tuanphan that's basically what I've tried. It basically works on desktop, but doesn't scale well on mobile. See the screenshot.

Since the height of the Gallery is not enough to fill the height of the phone screen, a space will appear.
If you stretch the height of the gallery, the image will not be full size, and always crop

Yeah, that's what I'm trying to figure out how to fix.