How do I make this section larger on mobile only?

Site URL: https://giraffe-carnation-cfwm.squarespace.com/

Hi! I am using this code to make the top banner on mobile section larger, but when I add it, the footer is messing up. How can I avoid this but still make the section at the top larger?

//MOBILE TOP IMAGE SECTION//
@media screen and (max-width:767px) {
.homepage section:first-child {
    padding-top: 180px !important;  
  height: 50vh !important;
    min-height: unset !important;
}
}

Should look like this:

21 minutes ago, mauramanor said:

Site URL: https://giraffe-carnation-cfwm.squarespace.com/

Hi! I am using this code to make the top banner on mobile section larger, but when I add it, the footer is messing up. How can I avoid this but still make the section at the top larger?

//MOBILE TOP IMAGE SECTION//
@media screen and (max-width:767px) {
.homepage section:first-child {
    padding-top: 180px !important;  
  height: 50vh !important;
    min-height: unset !important;
}
}

Should look like this:

 

Try this

@media screen and (max-width:767px) {
    .homepage #page section:first-child {
          padding-top: 180px !important;  
          height: 50vh !important;
          min-height: unset !important;
    }
}

@bangank36 THAT WORKED! Thank you SO much!

@bangank36Hi! If I wanted to do this to other pages, what would I replace .homepage with?

On 1/5/2021 at 5:03 AM, mauramanor said:

@bangank36Hi! If I wanted to do this to other pages, what would I replace .homepage with?

replace this name 

 .homepage #page section:first-child

with

Quote

data section id

Find data section id with this tool https://chrome.google.com/webstore/detail/squarespace-id-finder/igjamfnifnkmecjidfbdipieoaeghcff?hl=en