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!
Hi There,
Best way to help would be for you to share the theme.scss file completely here so we can check it.
Cheers!
}
.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;
}
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;
Can you just remove all instances of $border-color here? Just checking
Oh my goodness I found it:
.footer__link-item {
There was no color selected and that completely broke the code! Thank you for looking into it!
1 Like
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!
Oh you’ve already solved it! Same solution
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.
@include media-query($medium-up) {
.site-header__account,
.site-header__cart {
padding: 10px 11px;
}
}
.site-header__cart-title,
.site-header__search-title {
display: block;
vertical-align: middle;
@include visually-hidden();
}
.site-header__cart-title {
margin-right: 3px;
}
.site-header__cart-count {
display: flex;
align-items: center;
justify-content: center;
position: absolute;
right: 0.4rem;
top: 0.2rem;
font-weight: bold;
background-color: $color-btn-primary;
color: $color-btn-primary-text;
border-radius: 50%;
min-width: 1em;
height: 1em;
"
.site-header__cart-title,
@include visually-hidden();
this is the code in line 4460
Lawrence7:
@include media-query($medium-up) {
.site-header__account,
.site-header__cart {
padding: 10px 11px;
}
}
.site-header__cart-title,
.site-header__search-title {
display: block;
vertical-align: middle;
@include visually-hidden();
}
.site-header__cart-title {
margin-right: 3px;
}
.site-header__cart-count {
display: flex;
align-items: center;
justify-content: center;
position: absolute;
right: 0.4rem;
top: 0.2rem;
font-weight: bold;
background-color: $color-btn-primary;
color: $color-btn-primary-text;
border-radius: 50%;
min-width: 1em;
height: 1em;
Add a “}” at the end of the code above.
I just added the “}” but i am still having the same error
Great!