Banner Slideshow Desktop vs Mobile

Hi,

Site URL https://caterpillar-crocodile-jbdl.squarespace.com/config/pages

Could someone please help me input the correct code to change the height of our banner slideshow on the homepage for mobile? Happy with sizing on desktop. I've tried inputing a couple different ones but I must be missing something.

Cheers in advance

Nailed it! Thank you so much!

Hi there this solution is the first one to sort of helping me with my similar issue but not entirely. It doesn't matter how I adjust the height and width I can't seem to get the images to fit the mobile screen... and added kink might be that I have a card on my images... can someone please look at my site and tell me what I'm missing... www.sweetwatermusicfestival.ca.

On 4/2/2024 at 2:40 AM, Innisfree77 said:

Hi there this solution is the first one to sort of helping me with my similar issue but not entirely. It doesn't matter how I adjust the height and width I can't seem to get the images to fit the mobile screen... and added kink might be that I have a card on my images... can someone please look at my site and tell me what I'm missing... www.sweetwatermusicfestival.ca.

You can use this code to Website > Website Tools > Custom CSS

@media screen and (max-width:991px) {
.user-items-list-item-container[data-section-id="61f48c737bdd1d5866b6e367"] ul {
    min-height: unset !important;
}
.user-items-list-item-container[data-section-id="61f48c737bdd1d5866b6e367"] img {
    object-fit: contain !important;
}
}

Thank you so much for your help. This worked great for the photos and I hate to be a pain, but is there a way to adjust the text over the photos. Or is there another solution to this problem (see attached screenshots)? I'm sure there must be a way to code the text differently for mobiles, I'm just not sure if I can adjust in the regular settings or if it needs to be additional CSS. Thank you again!

On 4/5/2024 at 2:41 AM, Innisfree77 said:

Thank you so much for your help. This worked great for the photos and I hate to be a pain, but is there a way to adjust the text over the photos. Or is there another solution to this problem (see attached screenshots)? I'm sure there must be a way to code the text differently for mobiles, I'm just not sure if I can adjust in the regular settings or if it needs to be additional CSS. Thank you again!

I don't quite understand. What is problem in your screenshot?

The "card" doesn't resize to layover the image proportionately, so the image reduces and fits to width which is fantastic but because the "card" doesn't resize, it covers the whole photo, is there a way to adjust the card/font sizes for mobile so that it resizes proportionately to the photo. Does that make sense?