TheBulkyBard

That's rough. Now that I'm used to it, I vastly prefer fluid engine to classic. It's worth taking the time to re-adjust/fix the pages that were adjusted, instead of reverting imo. A fair few of the pages I had worked my hind end off to get working just right are not only now back to the way I like them, but also looking better. The stacking and layer editing is a dream, especially given the mobile/desktop separation now.

I was totally unaware this change was coming. Clicked on a popup today and, as curiosity got the best of me, I saved the change to Fluid Engine on my pre-existing site. At first I panicked and was quite furious due to how it seemingly destroyed all of my hard work...but then I took a breather, and started messing around with the new engine and IT IS BEAUTIFUL. So many things I used to have to use CSS for are now just built in or otherwise circumvented by how the Fluid Engine operates. Most notably being able to (most things I've tried have worked) FINALLY edit desktop and mobile independently from each other. I'm in love with it.

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 😅🤦‍♂️

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:

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

trial&error Meant to include with initial post, but forgot.

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