Working in theme.scss.liquid and now my site is broken

Highlighted
New Member
5 0 0

I was working in my theme.scss.liquid and everything was going fine. I copied one piece of code into it and now my whole site is broken and I get this message when I try to customize my theme: Invalid CSS after " color:": expected expression (e.g. 1px, bold), was "}" at 5368 . I've gone to that line in the code and I see nothing wrong so I have no idea what I've done wrong.

I've seen people say just go back and restore to older version but that does not show up as an option for me for some reason. And I've tried to redownload the theme and just copy the code from that one and paste it into this one but that is not option for me either. 

Can someone please help me out here!

0 Likes
Highlighted
Shopify Partner
931 135 152

Hi There,

Best way to help would be for you to share the theme.scss file completely here so we can check it. 

Cheers!

- Did we solve your issue? Like & Mark As Solution to help the community
- Should you need any direct help: contact@jhkcreate.com
K&J
0 Likes
Highlighted
New Member
5 0 0
}
.footer {
  padding: 10px 0 30px 0;
  border-top: 1px solid $border-color;
  background-color: #346bf6;
}

.footer__block-list {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  color: white;
 

}

.footer__title {
  position: relative;
  display: block;
  width: 100%;
  margin-bottom: 0.85em;
  text-align: left;
  color: white;
  font-size: 25px;

  &[disabled] {
    cursor: text;
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
  }
}

.footer__linklist {
  margin-top: -8px;
  margin-bottom: -5px;
  line-height: 1.4;
  color: white;
}

.footer__link-item {
  display: block;
  padding: 5px 0;
  color: 
}

.footer__newsletter-form {
  margin-top: 20px;
}

.footer__aside {
  display: flex;
  flex-direction: column;
  margin-top: 10px;
  font-size: to-size(12px);
}

.footer__aside-item {
  margin-top: 34px;
}

.footer__aside-item--copyright {
  margin-top: 45px;
  order: 1; /* We re-order it so that this part is always last */
}

.footer__aside-title {
  margin-bottom: 0.8em;
  color: white;
}

@include at('phone') {
  .footer__block-item {
    margin-right: -$mobile-container-gutter;
    padding-right: $mobile-container-gutter;
    border-bottom: 1px solid $border-color;
  }

  .footer__block-item--newsletter {
    border-bottom: none;
    order: 1;
  }

  .footer__title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0;
    padding: 19px 0;
  }

  .footer__collapsible {
    height: 0;
    overflow: hidden;
    transition: 0.3s ease-in-out;
  }

  .footer__collapsible-content {
    padding: 0 20px 25px 0;
  }

  .footer__block-item .rte {
    margin-top: -0.425em;
  }
}

@include at('tablet-and-up') {
  .footer {
    padding: 0;
    border-top: none;
  }

  .footer__wrapper {
    padding: 50px 0;
    border-top: 1px solid $border-color;
  }

  .footer__block-list {
    flex-direction: row;
    margin: -20px -35px;
  }

  .footer__block-item {
    flex: 0 0 50%;
    padding: 20px 35px;
  }

  .footer__block-item--newsletter {
    max-width: 350px;
  }

  .footer__block-item .plus-button {
    display: none;
  }

  .footer__linklist {
    margin-top: -2px;
    margin-bottom: 0;
  }

  .footer__aside {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-top: 75px;
    font-size: to-size(13px);
  }

  .footer__aside-item {
    margin-top: 0;
  }

  .footer__aside-item--copyright {
    width: 100%;
    text-align: center;
  }

  .footer__aside-item--copyright:not(:only-child) {
    margin-top: 75px;
  }
}

@include at('lap-and-up') {
  .footer__block-item {
    flex: 1 0 auto;
  }

  .footer__block-item--text {
    flex-basis: 300px;
  }

  .footer__block-item--newsletter {
    flex-basis: 350px;
  }

  .footer__block-item--links {
    max-width: 300px;
  }

  .footer__aside {
    align-items: flex-start;
    margin-top: 60px;
  }

  .footer__aside-item--copyright {
    order: 0;
    align-self: flex-end;
    margin-top: 0 !important;
    margin-bottom: -8px;
    width: auto;
    text-align: left;
  }
}
$header-element-height: 44px;

/* This is a bit hacky, but it allows to have a clearfix when the search bar on mobile is expanded */
#shopify-section-header::after {
  content: '';
  display: table;
  clear: both;
}
0 Likes
Highlighted
New Member
5 0 0

I've been specifically working in the footer section and Shopify says the error is at line 5368 which is this line:  border-bottom: 1px solid $border-color;

0 Likes
Highlighted
Shopify Partner
931 135 152

Can you just remove all instances of $border-color here? Just checking

- Did we solve your issue? Like & Mark As Solution to help the community
- Should you need any direct help: contact@jhkcreate.com
K&J
0 Likes
Highlighted
New Member
5 0 0

Nope that didn't work

0 Likes
Highlighted
New Member
5 0 0

Oh my goodness I found it:  

.footer__link-item {
display: block;
padding: 5px 0;
color: 
}

There was no color selected and that completely broke the code! Thank you for looking into it! 

0 Likes
Highlighted
Shopify Partner
931 135 152

The .footer__link-item class is missing the color field below:

.footer__link-item {
display: block;
padding: 5px 0;
color: ADD COLOR HERE
}


Should solve it! 

- Did we solve your issue? Like & Mark As Solution to help the community
- Should you need any direct help: contact@jhkcreate.com
K&J
0 Likes
Highlighted
Shopify Partner
931 135 152

Oh you've already solved it! Same solution Great!

- Did we solve your issue? Like & Mark As Solution to help the community
- Should you need any direct help: contact@jhkcreate.com
K&J
0 Likes
Highlighted
New Member
28 0 0

Please i just encounter the same issue  "

It looks like there is an error in your theme.


Try assets/theme.scss.liquid in the template editor to fix the error below:

Invalid CSS after " }": expected selector or at-rule, was "}" at 4460" i worked on my code , it was looking good when i went to bed but only to wake up to this error.

0 Likes