Encountering Expected RBRACE or Unexpected Token CSS errors in Divi can disrupt your site's styling and functionality. These errors typically occur due to syntax issues in your custom CSS code.
In this article, we will guide you through the process of diagnosing and fixing these common CSS errors. Learn how to identify and correct syntax mistakes, such as missing or misplaced braces, colons, and semicolons.
Sometimes, you may see the Expected RBRACE or Unexpected Token CSS errors when you add custom CSS code in Divi.
Why are you seeing Expected RBRACE or Unexpected Token CSS errors?
In Divi, you can add custom CSS in different places, such as
Theme Options → Custom CSS
Divi Builder Page settings → Advanced → Custom CSS
In Section, Row, Column, or Module's Advanced Tab and more.
For more details, please check the article on How to add Custom CSS to Divi.
All those areas use the CodeMirror library, which checks each line of custom CSS code to ensure it is syntax error-free.
If you see these errors, it usually means there is a syntax error, which we will need to fix.
Syntax of Regular CSS code
A regular CSS code has the following syntax:
A CSS Selector - Curly Bracket open - CSS Declarations - Curly Bracket close
Syntax of CSS with Media Queries (Responsive Screen) code:
A CSS Media Query has the following syntax:
Declaration - Media Type(optional) - the Keyword and (optional) - Open Parentheses - The size of the viewport - Closed Parentheses - Curly Bracket open - Regular CSS code - Curly Bracket close
It's important to understand the proper syntax of Regular CSS and CSS Media Query, including where and how the Curly Bracket opens and closes on them.
The most common cause of Expected RBRACE or Unexpected Token errors is some missing or mistakes on the Curly Bracket Open/Close, which might have happened during the Copying and pasting of the code.
Troubleshooting Expected RBRACE or Unexpected Token CSS errors in Theme Options → Custom CSS and Page Settings CSS
If you are seeing Expected RBRACE or Unexpected Token CSS errors in Theme Options → Custom CSS, follow these steps to troubleshoot:
Focus on the area where the error is showing.
Check the CSS codes above and below the error area.
Check all the CSS entered have the proper Curly Bracket opened/closed
If Media Query CSS is used, it's important to have an additional Curly Bracket Close at the bottom after all regular CSS inside it. You can refer to the above Syntax details and apply a fix according to it.
Spot the missing Curly Brackets open or close, and add the brackets as required.
Fixing the missing or wrong position brackets will fix it. The process of Divi Builder Page settings CSS is the same as Theme Options.
Troubleshooting Expected RBRACE or Unexpected Token CSS errors in Section, Row, Column, or Module's Advanced tab → Custom CSS → Module Elements
Section, Row, Column, or Module's Advanced tab → Custom CSS → Module Elements area is quite different than the one from Theme Options → Custom CSS.
The major difference is that in the Divi → Theme Options → General Tab → Custom CSS, you can add complete CSS code, whereas in the Advanced tab → Custom CSS → Module Elements, you can only add CSS Rules.
Example: If in the Advanced tab → Custom CSS → Module Elements, a complete CSS Code is added (including the selector), the Expected RBRACE or Unexpected Token CSS errors will occur.
As explained previously, in all those sections in the Advanced tab → Custom CSS → Module Elements, you can only add CSS rules, whereas Divi will automatically create the CSS selector for you.
You can find the predefined CSS Selector for that element by clicking the ? icon
In the above example, only the height: 100px property was added without the selector. In this example case, Divi will create the complete CSS code for you on the front end, which will be:
.et_pb_text_0 {
height: 100px;
}
Pro Tips:
In the Advanced tab → Custom CSS → Module Elements, add only CSS rules
In Divi → Theme Options → General Tab → Custom CSS, add fully flagged CSS code that includes the element's selector and/or CSS media queries.