Jump to content

Problem with missing closing '}'

Recommended Posts

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;

}

Link to comment
  • Replies 9
  • Views 280
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Posted Images

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.

image.png.0949481f7bbe57d35942b14abdf82114.png

 

And the end of your codes, it requires close Bracket

image.thumb.png.e3ef6a66cb09bd0ed64551e0f5b070da.png

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

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment

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 

Link to comment
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?

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment

I think that it has been already set

image.png.b8da690b7c1b7802e41f5bcb9cfda497.png

Do I miss something?

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment

Opp my bad.

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

image.thumb.png.9e164cc546989efc16343e4f28b67aeb.png

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

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment

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

Link to comment
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;
  }
}

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

 
Edited by Beyondspace

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

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.