Resizing banner in Mojave to stay a full width image for mobile

Site URL: https://www.wildlife.co.nz/wildlife-cruise-1

Hi,

I am trying to figure out how to use a media query to resize page banners to be a full width image on mobile view. The banners won't have text or buttons on them. I just want them to be a full width image that has the parallax effect as the user scrolls down the page. I want to be able to do this on multiple pages on my website.

Example page: www.wildlife.co.nz/wildlife-cruise-1

Squarespace 7.0 | Mojave template

@tuanphan I've seen you respond to others but the code you've provided them hasn't worked for me. Please help. 

Thanks in advance!

Edit above page settings > Advanced > Header

<style>
  @media screen and (max-width:640px) {
  .Parallax-item:first-child img {
    width: 100% !important;
    height: auto !important;
    left: 0 !important;
    top: 0 !important;
}
    .Parallax-item:first-child figure {
    transform: unset !important;
}
    section#new-page-54 {
    min-height: unset !important;
    height: 250px;
}
  }
</style>

Thank you! It doesn't seem to keep it's parallax qualities. Is that to be expected?

Yes. above code will disable Parallax on mobile.

To keep Parallax, try remove this line

Quote

.Parallax-item:first-child figure {
    transform: unset !important;
}