Jump to content

Mobile-specific homepage background troubles

Go to solution Solved by Mark.Hook,

Recommended Posts

Hello! My site is www.the-invisible-project.com. I had to change my homepage background for mobile, and I used the following code to do so:  

@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/63dae753e414bb1eb631a600/t/641de9bf1c36f47c6fbfcd08/1679681983588/invisiblehigher.png);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
}

It worked on the homepage, but the issue now is that this image is showing up as a background image on my other three mobile pages, too, which I don't want. How can I target just the homepage? 

Link to comment
  • Replies 2
  • Views 320
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

  • Solution

Take that out of your Custom CSS. Go to the page settings for your home page and click Advanced. Then paste the below code into that advanced section.

<style>
@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/63dae753e414bb1eb631a600/t/641de9bf1c36f47c6fbfcd08/1679681983588/invisiblehigher.png);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  }
}
</style>

 

Lead Developer at [Hook Creative][1] in Springfield, MO. [1]: http://www.hookcreative.co

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.