Resize specific section ID, independent of other (conflicting) code?? CSS

here is my code:

//Resizing mobile background image
  @media screen and (max-width:767px) {
#page>article>section:first-child {
     min-height: 40vh !important;
  section[data-section-id="642368d97cda926038bb8689"] {
    min-height: 10vh !important;
    }
}
}

So the image on the left is the page with an empty section, i want that section to be resized to reduce the white-space. I have two pages that this will need to be applied to, and maybe more in the future. so i imagine for each page i'll need to insert a working version of the second half of the code. 

on the right hand image (and most my project pages) that is being resized by the first half of the code. 

the problem is i can disable the first part of the code and the second half will (seem to) work for the pages in question... but i can't get them both to work together. i've tried deleting pieces of the code (#page>article>section) and messing to try and figure it out but i can't get both pieces to work. 

Thanks!

Can you share link to this page? We can check easier

On 5/8/2023 at 2:45 AM, tuanphan said:

Can you share link to this page? We can check easier

hi, thanks! sorry for the delay

the issue applies to this page, among a couple other.

https://www.koblecreative.com/work/migration

On 5/8/2023 at 2:45 AM, tuanphan said:

Can you share link to this page? We can check easier

i also just realized that the splash screen is resizing the main image and it looks funky. can i exclude just that page from the code?? 

thanks!!!

On 5/8/2023 at 2:45 AM, tuanphan said:

Can you share link to this page? We can check easier

any thoughts?

On 5/12/2023 at 4:46 AM, gantons said:

hi, thanks! sorry for the delay

the issue applies to this page, among a couple other.

https://www.koblecreative.com/work/migration

Add to Design > Custom CSS

@media screen and (max-width:767px) {
#page>article>[data-section-id="642368d97cda926038bb8689"]:first-child {
    min-height: unset !important;
}
}

On 5/25/2023 at 1:48 AM, tuanphan said:

Add to Design > Custom CSS

@media screen and (max-width:767px) {
#page>article>[data-section-id="642368d97cda926038bb8689"]:first-child {
    min-height: unset !important;
}
}

this worked well. thank you very much