Shortening specific section height on mobile

Site URL: https://www.sunseekerstudios.com.au/

Hi there!

I'm trying to shorten the banner image on my homepage only (surfing picture).

URL is https://www.sunseekerstudios.com.au/

The code I've been using is below, however it messes with the banner image on every page. I've tried to change the #page to #home but still no luck.

Is someone able to help?

Thanks!

@media screen and (max-width:767px) {

  #page section:first-child {

    min-height: 35vh !Important;

    margin-top: 15vh;

}

  }

6 hours ago, SSS23 said:

Site URL: https://www.sunseekerstudios.com.au/

Hi there!

I'm trying to shorten the banner image on my homepage only (surfing picture).

URL is https://www.sunseekerstudios.com.au/

The code I've been using is below, however it messes with the banner image on every page. I've tried to change the #page to #home but still no luck.

Is someone able to help?

Thanks!

 

@media screen and (max-width:767px) {

  #page section:first-child {

    min-height: 35vh !Important;

    margin-top: 15vh;

}

  }

 

It's best to target section IDs, try the code below instead.

@media screen and (max-width:767px) {

  section[data-section-id="61e0e46f79f3bd4d5975f1c8"] {
    min-height: 35vh !Important;
    margin-top: 15vh;
  }

}