Jump to content

Missing Closing "{"

Go to solution Solved by Lesum,

Recommended Posts

Hi guys,

Didn't want to be that person who posts their whole broken code .......& I've gone through past posts trying to fix it myself! (They all look fine?)

Why asking? Because the missing "{" I'm unable to find is (I believe) preventing me to add any additional code to work, Plus it's broken my 'reduce header on scroll' CSS code (attached - my header is now taking up too much 'real estate' on my site which would make it DIFFICULT for visitors.

 

Could someone please help me? **If it saves time, it's likely one of the latter ones. (For now I've removed the new code affect I was trying to add, as it's not working - think it's due to this problem🤔.) **Anyone know why this is happening now? As I look now, my codes are from AGES ago

 

 

.header-display-desktop {
    flex-direction: column-reverse;
    justify-content: space-between !important;
    align-items: flex-end;
}

.header-title-nav-wrapper {
    flex: 1 0 60% !important;
    width: 100%;
      padding: 13px;
}

div.header-actions {
    justify-content: flex-end !important;
}

.header-display-desktop {
    flex-direction: row-reverse !important;
}
.header-actions.header-actions--left {
    position: relative;
    top: -16px;
}
// Horizontal Line Color// 
.sqs-block-horizontalrule hr {   
background-color: #234b95; 
}
#header .header-title-logo img {
  transition: max-height 140ms ease-in-out
}
//Shrink Your Logo
#header .header-title-logo img {
  transition: max-height 140ms ease-in-out
}
#header.shrink {
  .header-announcement-bar-wrapper{
    padding-top: 10px!important;
    padding-bottom: 10px!important;
  }
  .header-title-logo img {
    max-height: 80px;
  }
}
// Change the background banner color
.sqs-cookie-banner-v2 {
    background-color: #004F98 !important;
}

// Change the banner text color
.sqs-cookie-banner-v2-text p {
    color: white !important;
}

// Change the link text color
.sqs-cookie-banner-v2 a {
    color: white !important;
}

// Change the link text color when you hover over it
.sqs-cookie-banner-v2 a:hover {
    color: #ff596a !important;
}

// Change the button backgrond color, border color, and text color.
.sqs-cookie-banner-v2-accept {
    border: white !important;
    background-color: #8E9AAF !important;
    color: # !important;
}
// Renegade Hover Affect
@media only screen and (min-width: 640px){
#block-de7ec3319d96d7bf2cc2 {
opacity: 0;
 transition: opacity 1s
}

#block-de7ec3319d96d7bf2cc2:hover {
opacity: 1;
transition: opacity 1s
}
}
// Kia Ora Hover Affect
@media only screen and (min-width: 640px){
#block-1d4e3bc22d0cab37a8f3 {
opacity: 0;
 transition: opacity 1s
}

#block-1d4e3bc22d0cab37a8f3:hover {
opacity: 1;
transition: opacity 1s
}
}
// The Loft Hover Affect
@media only screen and (min-width: 640px){
#block-45c5c7703f9e1cc33419 {
opacity: 0;
 transition: opacity 1s
}

#block-45c5c7703f9e1cc33419:hover {
opacity: 1;
transition: opacity 1s
}
}
// Purple Sky Yoga Hover Affect
@media only screen and (min-width: 640px){
#block-cdbb9c8c431199a0775b {
opacity: 0;
 transition: opacity 1s
}

#block-cdbb9c8c431199a0775b:hover {
opacity: 1;
transition: opacity 1s
}
}

// Remove underline from links
#collection-64aa2d55ebbedb323ec30113 #page .page-section:nth-of-type(2) a {   
  text-decoration: none !important;
}
// Remove the underline from links
#collection-64a91bd4ba46a51f51a31025 #page .page-section:nth-of-type(2) a {   
  text-decoration: none !important;
}
// Remove the underline from links
#collection-64aa51920e23a5275eb59eaf #page .page-section:nth-of-type(2) a {   
  text-decoration: none !important;
}
// Remove the underline from links
#collection-64aa52c33cc1765a582668ee #page .page-section:nth-of-type(2) a {   
  text-decoration: none !important;
}
//RESIZE code of next Blog at bottom of page
[data-collection-type^="blog"] .item-pagination-title {
  font-size: 4vmin;
}

#collection-64dec8d0293066228658beba{
.field-list {
display: flex;
flex-wrap: wrap;
}
  
  button.sqs-cookie-banner-v2-accept {
    color: black !important;
    border-color: black !important;
}
}
// Shop Title and Prices Font Size

.grid-title {
    font-size: 20px !important;
}

.grid-prices * {
    font-size: 19px !important;
}
//Blog comment font size
.comment-count span {
    font-size: 20px !important;
}
//Hide Date Category on Blogs
.blog-meta-item--tags {
  display: none;
}
//Remove Underline from Footer links
footer {
 p {
  a {
text-decoration: none !important;
transition: 0.3s : important; 
&:hover {
opacity: 0.7 !important;
transition: 0.3s !important;
}

Broken code causing too much header space taken up.jpg

Link to comment

The trouble starts at around line 68 in the following rule-set.

// Change the button backgrond color, border color, and text color.
.sqs-cookie-banner-v2-accept {
    border: white !important;
    background-color: #8E9AAF !important;
    color: # !important;
}

You need a color value. # won't work.

Around line 182 in the following rule-set.

/* Remove Underline from Footer links */
footer {
 p {
  a {
text-decoration: none !important;
transition: 0.3s : important; 
&:hover {
opacity: 0.7 !important;
transition: 0.3s !important;
}

There are multiple syntax errors.

  • an important is missing its !
  • there are missing } to match their opening counterparts.

You might find this LESS compiler of use. The error reporting seems a bit more helpful that what Squarespace does. I can't vouch how well it will do compiling the ancient version of LESS that SS understands.

Let us know how it goes.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment

Thanks @creedon! You have quite the eagle eye. I added a color (didnt make a difference...that I could see), plus I added the exclamation mark.

Thanks for the LESS Compiler too:) Not sure what it is and googles not helpful but looks like it would be helpful! I did post my code in there though & it picked up another error (! one) .  But "shrink header on scroll" isn't working (still taking up too much space) and the "missing closing }" is still there 🤔

Link to comment
Quote

Thanks for the LESS Compiler too:) Not sure what it is and googles not helpful but looks like it would be helpful!

Your code is technically LESS not plain old CSS. Google LESS preprocessor.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment

I'm still getting that "missing closing }" error, unsure if it's whats causing my "shrink header" code not to work

But going through the 'process of elimination', I found it's the very last code thats got the error (ie, it was when I Removed this code, that the warning disappeared). Any idea where the missing } should be?:

//Remove Underline from Footer links
footer {
 p {
  a {
text-decoration: none !important;
transition: 0.3s : !important; 
    &:hover }
opacity: 0.7 !important;
transition: 0.3s !important;
}

Link to comment
  • Solution

@april44 Hi! I reviewed your entire code and corrected the errors. Here's the corrected version. Try removing your entire code, add the following code, and test it:

.header-display-desktop {
    flex-direction: row-reverse !important;
    justify-content: space-between !important;
    align-items: flex-end;
}

.header-title-nav-wrapper {
    flex: 1 0 60% !important;
    width: 100%;
    padding: 13px;
}

div.header-actions {
    justify-content: flex-end !important;
}

.header-actions.header-actions--left {
    position: relative;
    top: -16px;
}

/* Horizontal Line Color */
.sqs-block-horizontalrule hr {   
    background-color: #234b95; 
}

#header .header-title-logo img {
    transition: max-height 140ms ease-in-out;
}

/* Shrink Your Logo */
#header.shrink .header-announcement-bar-wrapper {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}

#header.shrink .header-title-logo img {
    max-height: 80px;
}

/* Change the background banner color */
.sqs-cookie-banner-v2 {
    background-color: #004F98 !important;
}

/* Change the banner text color */
.sqs-cookie-banner-v2-text p {
    color: white !important;
}

/* Change the link text color */
.sqs-cookie-banner-v2 a {
    color: white !important;
}

/* Change the link text color when you hover over it */
.sqs-cookie-banner-v2 a:hover {
    color: #ff596a !important;
}

/* Change the button background color, border color, and text color */
.sqs-cookie-banner-v2-accept {
    border: white !important;
    background-color: #8E9AAF !important;
    color: white !important;
}

/* Renegade Hover Effect */
@media only screen and (min-width: 640px) {
    #block-de7ec3319d96d7bf2cc2 {
        opacity: 0;
        transition: opacity 1s;
    }

    #block-de7ec3319d96d7bf2cc2:hover {
        opacity: 1;
        transition: opacity 1s;
    }
}

/* Kia Ora Hover Effect */
@media only screen and (min-width: 640px) {
    #block-1d4e3bc22d0cab37a8f3 {
        opacity: 0;
        transition: opacity 1s;
    }

    #block-1d4e3bc22d0cab37a8f3:hover {
        opacity: 1;
        transition: opacity 1s;
    }
}

/* The Loft Hover Effect */
@media only screen and (min-width: 640px) {
    #block-45c5c7703f9e1cc33419 {
        opacity: 0;
        transition: opacity 1s;
    }

    #block-45c5c7703f9e1cc33419:hover {
        opacity: 1;
        transition: opacity 1s;
    }
}

/* Purple Sky Yoga Hover Effect */
@media only screen and (min-width: 640px) {
    #block-cdbb9c8c431199a0775b {
        opacity: 0;
        transition: opacity 1s;
    }

    #block-cdbb9c8c431199a0775b:hover {
        opacity: 1;
        transition: opacity 1s;
    }
}

/* Remove underline from links */
#collection-64aa2d55ebbedb323ec30113 #page .page-section:nth-of-type(2) a {   
    text-decoration: none !important;
}

/* Remove the underline from links */
#collection-64a91bd4ba46a51f51a31025 #page .page-section:nth-of-type(2) a {   
    text-decoration: none !important;
}

/* Remove the underline from links */
#collection-64aa51920e23a5275eb59eaf #page .page-section:nth-of-type(2) a {   
    text-decoration: none !important;
}

/* Remove the underline from links */
#collection-64aa52c33cc1765a582668ee #page .page-section:nth-of-type(2) a {   
    text-decoration: none !important;
}

/* RESIZE code of next Blog at bottom of page */
[data-collection-type^="blog"] .item-pagination-title {
    font-size: 4vmin;
}

#collection-64dec8d0293066228658beba .field-list {
    display: flex;
    flex-wrap: wrap;
}

button.sqs-cookie-banner-v2-accept {
    color: black !important;
    border-color: black !important;
}

/* Shop Title and Prices Font Size */
.grid-title {
    font-size: 20px !important;
}

.grid-prices * {
    font-size: 19px !important;
}

/* Blog comment font size */
.comment-count span {
    font-size: 20px !important;
}

/* Hide Date Category on Blogs */
.blog-meta-item--tags {
    display: none;
}

/* Remove Underline from Footer links */
footer p a {
    text-decoration: none !important;
    transition: 0.3s !important; 
}

footer p a:hover {
    opacity: 0.7 !important;
    transition: 0.3s !important;
}

 

If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. 

Sam
Web Developer & Digital Designer

 Did you find my contribution helpful? Buy me a coffee?

Link to comment

Omg @Lesum😲 I dont know WHAT you did. But Whatever you did, not ONLY has the error disappeared, but my 'banner shrink' is now working again! PLUS my Cookie Banner has gone back to my website blue!😯🙏💖🙌🔥This has been SUPER frustrating🙏

I would LOVE to know where the error was. Also wondering if one error in the entire code (ie one "missing closing }") will break all codes, ie the reason why my cookie banner was no longer blue and why my banner shrink stopped working🤔

Thank you SO so much again 💯🙌

 

image.thumb.png.e7e05908b40d34ef731ca9fc4c324a2c.png

Link to comment

@april44  You're welcome! There were several errors in your code: missing semicolons at the end of several lines, invalid comment syntax, missing closing braces (}), and errors like color: # !important; where no color code was present.

Depending on the error, it can break all your code or even the entire site. Most of the time, if an error occurs, the rest of the code lines below the error stop working. So whenever you add new CSS code, if you're not 100% sure it's correct, add the new code below everything you've added so far.

If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. 

Sam
Web Developer & Digital Designer

 Did you find my contribution helpful? Buy me a coffee?

Link to comment
14 hours ago, april44 said:

Also wondering if one error in the entire code (ie one "missing closing }") will break all codes

It can. It just depends on the particular syntax error and situation. Sometimes the computer can muddle through an error and recover to some degree.

Edited by creedon

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

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.