Hello,
Let me preface this by saying I know nothing about CSS and the code I have was copy and pasted from an instructional blog. So I needed to adjust my header to fit mobile, found code to do so, and it worked great on that page:
@media only screen and (max-width: 640px) {
#collection-638502928671157ecff76b37 {
#page .page-section:nth-of-type(1) {
img {
display: none;
}
.sqs-block-image img {
display: block;
}
.section-background {
background: url("https://static1.squarespace.com/static/6192b53f2545b77e9f793c46/t/638fa12a4f194e2bd755600f/1670357293799/X+2023.png");
background-repeat: no-repeat;
background-size: 100%;
}
}
}
}
Now I am designing another page and it has the same issue. I want to use the same code with a different pic for a different page. I pasted it the next available line after the code above but nothing is happening. I had a feeling there has to be some sort of code between the two I am unaware of, but I tried anyway (this second page is not published yet). What do I have to do to get the other page to apply this samecode? Code I want to apply is below. Thanks!
@media only screen and (max-width: 640px) {
#COLLECTIONID {#collection-6390dab4bbe47d0784d02319
#page .page-section:nth-of-type(1) {
img {
display: none;
}
.sqs-block-image img {
display: block;
}
.section-background {
background: url("https://static1.squarespace.com/static/6192b53f2545b77e9f793c46/t/6390e4c7f7f76f52acd4228d/1670440139269/GG+2023.png");
background-repeat: no-repeat;
background-size: 100%;
}
}
}
}
