Jump to content

Shortening specific section height on mobile

Recommended Posts

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;

}

  }

 

Link to comment
  • Replies 1
  • Views 526
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

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;
  }

}

 

Please give this a 👍 if it helps. Make sure to quote me or tag me in your reply, otherwise I won't be notified.

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.