Hope_Dean Posted March 24, 2023 Share Posted March 24, 2023 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
Solution Mark.Hook Posted March 24, 2023 Solution Share Posted March 24, 2023 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
Hope_Dean Posted March 24, 2023 Author Share Posted March 24, 2023 I don't have access to advanced, but I put this in the code block and it worked. Thank you! Mark.Hook 1 Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment