Jump to content

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

Go to solution Solved by tuanphan,

Recommended Posts

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;
}
} "Issue.thumb.png.28117fb1165b8322f13652dc0d7b5d2f.png

Link to comment
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;
}
} "Issue.thumb.png.28117fb1165b8322f13652dc0d7b5d2f.png

What is your password?

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
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;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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;
}
}

Link to comment
  • Solution
On 12/6/2021 at 2:04 PM, TheBulkyBard said:

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: 

Issues 2.png

Issues.png

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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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

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.