Banner image not resizing for mobile, desktop

We have a gif as a banner image on one of our pages that doesn't resize to fit desktop displays, and doesn't resize at all for mobile. I found several threads and on the forum and followed the advice to add a custom CSS code to direct the site to use a different image on mobile, but thus far nothing has worked. 

How do I configure the current banner image to automatically resize for desktops and mobile displays or is there a custom CSS code I can add that directs the page to use an alternate (gif) image for mobile on that page only?

12 hours ago, u28h20 said:

 

We have a gif as a banner image on one of our pages that doesn't resize to fit desktop displays, and doesn't resize at all for mobile. I found several threads and on the forum and followed the advice to add a custom CSS code to direct the site to use a different image on mobile, but thus far nothing has worked. 

How do I configure the current banner image to automatically resize for desktops and mobile displays or is there a custom CSS code I can add that directs the page to use an alternate (gif) image for mobile on that page only?

Here's the page: https://www.nysid.edu/commencement-2022 )

Try adding to Home > Design > Custom Css

.Intro-image.loaded  img{
  width: 100% !important;
  height: auto !important;
  left: 0 !important;

}

Let me know how it works

On 2/24/2022 at 10:46 AM, bangank36 said:

Try adding to Home > Design > Custom Css

.Intro-image.loaded  img{
  width: 100% !important;
  height: auto !important;
  left: 0 !important;

}

Let me know how it works

Thank you! That helped with the resizing. This created another issue on mobile:

1. There's no padding at the top, so part the image is cut off by the white background of the navigation bar. 

2. In order for the full height of the image to to be visible on desktop displays, I had to put a spacer bar on top of the image. Now, on mobile, that spacer bar creates a dark blue box below the banner image. How do I remove this, just for mobile? 

On 2/25/2022 at 3:02 AM, u28h20 said:

Thank you! That helped with the resizing. This created another issue on mobile:

 

1. There's no padding at the top, so part the image is cut off by the white background of the navigation bar. 

 

2. In order for the full height of the image to to be visible on desktop displays, I had to put a spacer bar on top of the image. Now, on mobile, that spacer bar creates a dark blue box below the banner image. How do I remove this, just for mobile? 

Don't remove above code. Add this to Design > Custom CSS

@media screen and (max-width:767px) {
body#collection-620ea16bb04b0051114435d8 section.Intro.Intro--has-image {
    height: 135px !important;
}
}