Jump to content

changing mobile background for portfolio page but not for pages under it

Recommended Posts

Site URL: https://trumpet-red-ffsb.squarespace.com

I am trying to change my portfolio landing page (which is also my home page) so I get a different image for the mobile site vs the desktop site. That seems easy enough, but it changes the banner for the page under that as well. Any page accessed through the portfolio pages don't change however, just the portfolio and the pages connected to portfolio. So if you go to the Chalkboard Art page , it has the same image as the portfolio page (I'd like it to be plain black). But if you go to Stonyfield under the Chalkboard Art, it's black, just how I want it. Is there any way to keep it from changing the secondary page?

I got the original code from Inside The Square

/* =============================== */
/* Shows different image 4 mobile */  
@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/62243b39a0f8a94fd0f4b835/t/622a92407674cb7948261a63/1646957124561/Mobile-bkg.png);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
}

https://trumpet-red-ffsb.squarespace.com

sharynchanart

 

Thanks so much!

Screen Shot 2022-03-11 at 11.13.33 AM.png

Screen Shot 2022-03-11 at 11.12.59 AM.png

Screen Shot 2022-03-11 at 11.13.14 AM.png

Edited by SChan
added images for illustrative purposes
Link to comment
  • Replies 3
  • Views 235
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

Use below code, I hope it will solve your problem. Still any issues, Please let me know

 

 

@media only screen and (max-width: 640px){
body:not(.view-item) #page .page-section:nth-child(1) .section-background img {opacity:0 }
body:not(.view-item) #page .page-section:nth-child(1)  .section-background {
background-image: url(https://static1.squarespace.com/static/62243b39a0f8a94fd0f4b835/t/622a92407674cb7948261a63/1646957124561/Mobile-bkg.png);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
}

Md. Hasanuzzaman

Portfolio

 

Link to comment
  • 5 months later...

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.