Jump to content

Gallery slider behind transparent header on both mobile and desktop

Recommended Posts

Hi there,

I'm trying to achieve something with the homepage of https://whitehousescarpentry.squarespace.com/

Password is Whc2023

 

Basically, I'm using https://www.killowenco.com/ as inspiration as the client loves it, where the gallery slider sites at the top of screen, behind a transparent header.

I've kind of got it working on desktop. However on mobile it does the right thing behind the header but will not go to full height, it maintains the image ratio. I'd like it to take up the full screen if possible.

Then I'm trying to get the image captions to appear on top of each picture in the bottom left corner.

Can anyone assist here? So far the only CSS i have in place is:

body.homepage .header-announcement-bar-wrapper {
    background: transparent !important;
    position: absolute !important;
}

Thanks in advance!

Link to comment
  • Replies 11
  • Views 842
  • Created
  • Last Reply

Top Posters In This Topic

3 hours ago, Carmelina said:

Sorry Tuanphan, I see the issue now.

The site should be https://whitehousescarpentry.squarespace.com/

I messed up the link sorry.

So now, your problem is make caption appear in bottom left of image on Mobile?

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
38 minutes ago, tuanphan said:

So now, your problem is make caption appear in bottom left of image on Mobile?

 

Main thing i'm trying to achieve is having our homepage do the same thing as https://www.killowenco.com/ with an image slider behind the header, with the image caption bottom left. I like how there is no scroll on their site too, but im not sure how thats being done.

I'd like it to present the same on both mobile and desktop, but at the moment on mobile its not 'zooming' in and presenting the image full screen (i'm aware that it will crop the image, but that should be ok if centered.) and then i'm losing the captions on mobile also.

 

Link to comment
On 5/3/2023 at 9:27 AM, Carmelina said:

Main thing i'm trying to achieve is having our homepage do the same thing as https://www.killowenco.com/ with an image slider behind the header, with the image caption bottom left. I like how there is no scroll on their site too, but im not sure how thats being done.

I'd like it to present the same on both mobile and desktop, but at the moment on mobile its not 'zooming' in and presenting the image full screen (i'm aware that it will crop the image, but that should be ok if centered.) and then i'm losing the captions on mobile also.

 

To show gallery caption on mobile, try adding this to Design > Custom CSS

/* 7.0 Gallery caption mobile */
@media screen and (max-width:900px) {
	.sqs-gallery-block-slideshow .meta {
    display: block !important;
    left: 0 !Important;
    top: 100px !important;
    width: 100% !Important;
max-width: 100% !important;margin-left: 0 !important;}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
On 5/5/2023 at 5:45 PM, tuanphan said:

To show gallery caption on mobile, try adding this to Design > Custom CSS

/* 7.0 Gallery caption mobile */
@media screen and (max-width:900px) {
	.sqs-gallery-block-slideshow .meta {
    display: block !important;
    left: 0 !Important;
    top: 100px !important;
    width: 100% !Important;
max-width: 100% !important;margin-left: 0 !important;}
}

 

Thanks Tuanphan, but that hasn't brought the captions on mobile.

And did you have any way of getting the gallery to "zoom in" full screen on mobile too?

I appreciate your assistance!

Link to comment
19 hours ago, Carmelina said:

Thanks Tuanphan, but that hasn't brought the captions on mobile.

And did you have any way of getting the gallery to "zoom in" full screen on mobile too?

I appreciate your assistance!

#1. Can you add & keep the code in CSS box? We can check it again easier

#2. ..can you share link to page where you use gallery? I forgot..

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

currently, css code is:

 

body.homepage .header-announcement-bar-wrapper {
    background: transparent !important;
    position: absolute !important;
}
/* 7.0 Gallery caption mobile */
@media screen and (max-width:900px) {
    .sqs-gallery-block-slideshow .meta {
    display: block !important;
    left: 0 !Important;
    top: 100px !important;
    width: 100% !Important;
max-width: 100% !important;margin-left: 0 !important;}
}

It is the homepage of https://whitehousescarpentry.squarespace.com/

Password: Whc2023

 

Link to comment

Use this new code

@media screen and (max-width: 900px) {
    .sqs-gallery-block-slideshow.sqs-gallery-block-meta-position-bottom .meta, .sqs-gallery-block-slideshow.sqs-gallery-block-meta-position-bottom-left .meta, .sqs-gallery-block-slideshow.sqs-gallery-block-meta-position-bottom-right .meta {
        display:block !important;
        left: 0 !important;
        top: 100px !important;
        width: 100% !Important;
        max-width: 100% !important;
        margin-left: 0 !important;
        opacity: 1 !important;
    }
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

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.