Jump to content

Using multiple CSS design snippets

Go to solution Solved by Ziggy,

Recommended Posts

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%;

    }

  }

}

 

}




 

Link to comment
  • Replies 2
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

  • Solution
45 minutes ago, TDBJ said:

@media only screen and (max-width: 640px) {

#COLLECTIONID {#collection-6390dab4bbe47d0784d02319

  #page .page-section:nth-of-type(1) {

You have a mistake,     #COLLECTIONID {     shouldn't be in there.

Please like and upvote if my comments were useful to you. Thanks!

Zygmunt Spray
Squarespace Website Designer
Contact me: https://squarefortytwo.com/ 
🔌Ghost Squarespace Plugins (Referral link)
Buy me a coffee

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.