Innisfree77

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?

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!

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.

Hello Tuan, I'm having a similar issue, I have tried several of the snippets of code included in this forum string but I can not seem to get the images in the "banner slideshow" on the "/home" page to resize for different screen sizes. You seem to have a good handle on the problem can you have a look and tell me what I'm doing wrong please. www.sweetwatermusicfestival.com I've listed a few of the different snippets I've tried below... I think I must just be getting a piece of the code incorrect... if you could help I'd really appreciate it. I've tried... /* resize mobile slideshow */ @media screen and (max-width:640px) { section#gallery { height: 30vh; } section#gallery img { width: 100% !important; height: auto !important; left: 0 !important; top: 0 !important; } } and... @media screen and (max-width: 460px) { .homepage .gallery-fullscreen-slideshow[data-width="full-bleed"] { height: 40vh !important; } .homepage .gallery-fullscreen-slideshow[data-width="full"] { height: 40vh !important } .homepage .gallery-fullscreen-slideshow[data-width="full-bleed"] img { object-fit: contain !important; } } and I even tried this from another designer. /*Shut off Parallax - Page Settings - Advanced*/ <script> Static.SQUARESPACE_CONTEXT.tweakJSON[“tweak-overlay-parallax-enabled”] = false; </script> /*Resize Background Index Image - Design - Advanced*/ @media screen and (max-width:400px) { #home { min-height:initial !important; display:-webkit-box; display:-ms-flexbox; display:flex; background-color:#000000; //change as needed -webkit-box-orient:vertical; -webkit-box-direction:reverse; -ms-flex-direction:column-reverse; flex-direction:column-reverse;} .Index-page-image { position:relative; height:40vh; } .Index-page-content { min-height:initial !important; padding-top:10px; } }

I'm having a similar issue but mine is even more specific to YouTube videos that have been scheduled. 2 weeks ago I had no issues linking scheduled YouTube videos, I could even link videos that weren't fully uploaded on YouTube, but all of sudden last week I started having issues with this. The website I'm managing is in 7.0 platform. I've been linking to these scheduled videos for 6 months, seems weird that all of a sudden it should stop working. The error I get is "Incorrect link. Replace link above".