Is there a way to fix this poor interaction between the desktop & mobile banner on product pages after modifying it with CSS?

Site URL: https://www.cg3dp.com/pym

New here, so apologies if I've asked this question the wrong way. Haven't had any issues finding fixes to problems via past responses on these forums though I've reached an impasse. The following CSS I've used in the page header code injection to make the banner not crop when in mobile is also adding the banner to the product page, making things impossible to read while in mobile view. Is there any way to fix this while maintaining the desired effect from the original CSS? (also, please forgive typos, organizational, placeholders. Still building the site.)

" @media only screen and (max-width: 640px){
#page .page-section:nth-child(1) .section-background img {opacity:0 }
#page .page-section:nth-child(1)  .section-background {
background-image: url(https://static1.squarespace.com/static/60af5accb6d92d4c48bc8697/t/619ccc48a270274317d6ed01/1637665864472/PYM+MOBILE+STOREFRONT.png);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
} "

2 hours ago, TheBulkyBard said:

Site URL: https://www.cg3dp.com/pym

New here, so apologies if I've asked this question the wrong way. Haven't had any issues finding fixes to problems via past responses on these forums though I've reached an impasse. The following CSS I've used in the page header code injection to make the banner not crop when in mobile is also adding the banner to the product page, making things impossible to read while in mobile view. Is there any way to fix this while maintaining the desired effect from the original CSS? (also, please forgive typos, organizational, placeholders. Still building the site.)

" @media only screen and (max-width: 640px){
#page .page-section:nth-child(1) .section-background img {opacity:0 }
#page .page-section:nth-child(1)  .section-background {
background-image: url(https://static1.squarespace.com/static/60af5accb6d92d4c48bc8697/t/619ccc48a270274317d6ed01/1637665864472/PYM+MOBILE+STOREFRONT.png);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
} "

What is your password?

trial&error

Meant to include with initial post, but forgot. 

On 12/2/2021 at 12:02 PM, TheBulkyBard said:

trial&error

Meant to include with initial post, but forgot. 

 

To resize top image on mobile, you can add this to Design > Custom CSS

@media screen and (max-width:767px) {
[data-section-id="60af63810f340a386f267294"] {
    min-height: unset !important;
    height: 40vh;
    margin-top: 40vh;
}
}

On 12/4/2021 at 2:19 AM, tuanphan said:

To resize top image on mobile, you can add this to Design > Custom CSS

@media screen and (max-width:767px) {
[data-section-id="60af63810f340a386f267294"] {
    min-height: unset !important;
    height: 40vh;
    margin-top: 40vh;
}
}

 

I did previously reply, though deleted it as I've since tinkered around a bit more and I believe I have a better way to word my question. 

The issue I'm having is that the "nth-child(1)" is also overriding my product page background (which is usually a regular purple). Is there a way to add exceptions, whether that be all product pages, or if I have to apply it page by page? 

@media only screen and (max-width: 640px){
#page .page-section:nth-child(1) .section-background img {opacity:0 }
#page .page-section:nth-child(1)  .section-background {
background-image: url(https://static1.squarespace.com/static/60af5accb6d92d4c48bc8697/t/619ccc48a270274317d6ed01/1637665864472/PYM+MOBILE+STOREFRONT.png);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
}

If I have to simply remove the "Nth child" code, that's fine, I was just hoping I wouldn't have to edit so many images, as I'll have to edit nearly all of the banners.

For reference, this only occurs on product pages: 

On 12/11/2021 at 12:03 AM, tuanphan said:

You should use data-section-id, instead of using #page .page-section:nth-child(1) 

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

Thanks. This worked. Feel kind of embarrassed, as the tutorial I had looked up mentioned it may be a better solution before, but I became so caught up in seeing something I didn't want to happen happening that I overlooked the obvious solution. Seems like sometimes I can create problems that don't exist 😅🤦‍♂️