Problem with missing closing '}'

Hi everyone, I edited the CSS for my website and Ive got this message showing up   missing closing `}`

I can't find which line needs to be fixed and I am hoping that you could help me, I have pasted the code below:

Also i wanted to delete the line which enables 2 products to be displayed on mobiles, could you please tell me which one it is?

Thank you so much in advance,

Paul-Louis

.header-search-bar{

  margin: 0 0 0 2.5vw;

}

@media only screen and (pointer: coarse) and (max-width: 1024px), screen and (max-width:  799px ){

  .header-search-bar{

    display:none;

    margin: 0 0 0 0vw;

  }

}

.header-search-bar  .search-input{

  border: 1px solid currentColor !important;

}

.header-search-bar  .search-input::placeholder{

  color: currentColor !important;

}

.mobile-header-search-bar{

  background-color: transparent;

  display:block;

  padding-left:3vw;

  padding-right:3vw;

}

.mobile-header-search-bar .preFade, .mobile-header-search-bar .preScale,.mobile-header-search-bar .preSlide,.mobile-header-search-bar .preClip, .header-search-bar .preFade, .header-search-bar .preScale, .header-search-bar .preSlide, .header-search-bar .preClip{

  opacity:1 !important;  

  transform: scale(1) translate(0%,0%) !important;

  clip-path: unset !important;

}

.Cart-inner>.icon{

  display:none;

}

.view-list .product-mark.sold-out {

    position: static !important;

    background: transparent !important;

    color: black !important;

    text-align: center !important;

    transform: unset !important;

    top: unset !important;

    right: unset !important;

    width: 100%;

}

#header.shrink {

  .header-announcement-bar-wrapper{

    padding-top: 15px!important;

    padding-bottom: 15px!important;

  }

  .header-title-logo img {

    max-height: 50px;

  }

}

.product-block {

    padding-bottom: 0;

}

.button-block {

    padding-top: 0;

}

#header .header-title-logo img {

  transition: max-height 140ms ease-in-out

}

#header.shrink {

  .header-announcement-bar-wrapper{

    padding-top: 20px!important;

    padding-bottom: 20px!important;

  }

  .header-title-logo img {

    max-height: 40px;

  }

  footer a {

text-decoration: none !important;

}

#collection-632c4641ac6d00332db1b58e a {   

text-decoration: none !important;

}

@font-face {

    font-family: 'Blippo';

       src: url('https://static1.squarespace.com/static/61e1b6120151c044dad25930/t/63d1543436e4eb149cfb5a5d/1674662965093/blippo.ttf');

  }

h1 {font-family: 'Blippo

  }

/* 2 images mobile */

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

div#page-5ebd4058035b3a35aa4a5992 .image-block {

    width: 50%;

    float: left !important;

    clear: none !important;

    padding-left: 0 !important;

    padding-right: 0 !important;

}

div#page-5ebd4058035b3a35aa4a5992 .image-block:nth-child(2n+1) {

    clear: left !important;

}

}

footer a {

text-decoration: none !important;

}

#collection-632c4641ac6d00332db1b58e a {   

text-decoration: none !important;

}

1 hour ago, Paul-Louis said:

Hi everyone, I edited the CSS for my website and Ive got this message showing up   missing closing `}`

I can't find which line needs to be fixed and I am hoping that you could help me, I have pasted the code below:

 

Also i wanted to delete the line which enables 2 products to be displayed on mobiles, could you please tell me which one it is?

 

Thank you so much in advance,

Paul-Louis

 

.header-search-bar{

  margin: 0 0 0 2.5vw;

}

@media only screen and (pointer: coarse) and (max-width: 1024px), screen and (max-width:  799px ){

  .header-search-bar{

    display:none;

    margin: 0 0 0 0vw;

  }

}

.header-search-bar  .search-input{

  border: 1px solid currentColor !important;

}

.header-search-bar  .search-input::placeholder{

  color: currentColor !important;

}

.mobile-header-search-bar{

  background-color: transparent;

  display:block;

  padding-left:3vw;

  padding-right:3vw;

}

.mobile-header-search-bar .preFade, .mobile-header-search-bar .preScale,.mobile-header-search-bar .preSlide,.mobile-header-search-bar .preClip, .header-search-bar .preFade, .header-search-bar .preScale, .header-search-bar .preSlide, .header-search-bar .preClip{

  opacity:1 !important;  

  transform: scale(1) translate(0%,0%) !important;

  clip-path: unset !important;

}

.Cart-inner>.icon{

  display:none;

}

 

.view-list .product-mark.sold-out {

    position: static !important;

    background: transparent !important;

    color: black !important;

    text-align: center !important;

    transform: unset !important;

    top: unset !important;

    right: unset !important;

    width: 100%;

}

#header.shrink {

  .header-announcement-bar-wrapper{

    padding-top: 15px!important;

    padding-bottom: 15px!important;

  }

  .header-title-logo img {

    max-height: 50px;

  }

}

.product-block {

    padding-bottom: 0;

}

.button-block {

    padding-top: 0;

}

 

#header .header-title-logo img {

  transition: max-height 140ms ease-in-out

}

#header.shrink {

  .header-announcement-bar-wrapper{

    padding-top: 20px!important;

    padding-bottom: 20px!important;

  }

  .header-title-logo img {

    max-height: 40px;

  }

 

  footer a {

text-decoration: none !important;

}

 

#collection-632c4641ac6d00332db1b58e a {   

text-decoration: none !important;

}

  

@font-face {

 

    font-family: 'Blippo';

 

       src: url('https://static1.squarespace.com/static/61e1b6120151c044dad25930/t/63d1543436e4eb149cfb5a5d/1674662965093/blippo.ttf');

 

  }

 

h1 {font-family: 'Blippo

  }

 

/* 2 images mobile */

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

div#page-5ebd4058035b3a35aa4a5992 .image-block {

    width: 50%;

    float: left !important;

    clear: none !important;

    padding-left: 0 !important;

    padding-right: 0 !important;

}

div#page-5ebd4058035b3a35aa4a5992 .image-block:nth-child(2n+1) {

    clear: left !important;

}

}

 

footer a {

text-decoration: none !important;

}

 

#collection-632c4641ac6d00332db1b58e a {   

text-decoration: none !important;

}

You are missing the Quotation marks at the end of this code.

And the end of your codes, it requires close Bracket

Support me by pressing 👍 or marking as solution if this is useful for you

Hi! Thank you so much for your help, it worked!

I am now looking to edit the CSS which enabled having 2 products on the same row for mobile versions, i can't find which line of code that would be, could you please help me locate it? 

Thank you very much, 
Paul-Louis 

1 minute ago, Paul-Louis said:

Hi! Thank you so much for your help, it worked!

I am now looking to edit the CSS which enabled having 2 products on the same row for mobile versions, i can't find which line of code that would be, could you please help me locate it? 

 

Thank you very much, 
Paul-Louis 

I need your URL to check the right code. Can you share it?

This is the URL: https://wonderaccessory.com/all-products

Thank you,

I think that it has been already set

Do I miss something?

Hi again, I successfully managed to add the code that shows 2 products per row but I would like to go back to showing only 1 product per row now. 

Thank you,

Opp my bad.

I can see that this code makes 2 products per row on mobile

If you want to disable it, just delete this line 

grid-template-columns: repeat(2,minmax(0,1fr)) !important;

after that, it will get back to 1 product per row

Support me by pressing 👍 or marking as solution if this is useful for you

Hi, I have right clicked on Inspect the page, found the line and deleted it. It shows me 1 product per page (yay) but I cannot save the changes in the inspect mode. I'm new to all this, can you tell me if I should copy things from the Inspect mode onto my Custom CSS and what things should be copied?

Thank you so much

24 minutes ago, Paul-Louis said:

Hi, I have right clicked on Inspect the page, found the line and deleted it. It shows me 1 product per page (yay) but I cannot save the changes in the inspect mode. I'm new to all this, can you tell me if I should copy things from the Inspect mode onto my Custom CSS and what things should be copied?

Thank you so much

The code you check on dev tool is just rendered on the client side. You need to find this code on your coding areas on Squarespace like:

- Home > Design > Custom Css 

- Code injection

- Header code injection

Or  use the following code on Home > Design > Custom Css to overwrite your old code (located somewhere)

@media screen and (max-width: 767px) {
  .products.collection-content-wrapper .list-grid {
    grid-template-columns: unset !important;
  }
}