Issue When Pasting CSS Snippet
Are you trying to customize your Divi website with some CSS code but getting a strange message about expected RBRACE or unexpected token? If so, don’t worry, in this tutorial I will explain and show you have to solve this issue you may face when using custom code snippets in Divi.
▶️ Please watch the video above to get all the exciting details! 👆
The Problem
If you are following one of our hundreds of tutorials and are copying and pasting CSS code or if you are writing your own CSS code, you may face an error message that looks similar to the screenshot below. It will say “Expected RBRACE.” and Unexpected token ‘}’ as a red error message.
This may seem like a big problem, but don’t worry, it is very minor, and the solution is very simple. Both errors are related, and both of them are referring to the “right brace” otherwise known as the closing curly bracket.
The first error you may see is “Expected RBRACE” which is showing kind of as a false positive. When writing CSS, it is always required to end any code block with a curly bracket, so if it is missing, you will see the error of Expected RBRACE since it was expected (aka required) but not found.
The second error called the “unexpected token” is actually the real issue here. It is trying to let you know that a right curly bracket has been used in this CSS code box, but it is not possible to use that here.
However, in our screenshot and probably what you are facing, you can see it clearly has a right curly brace. One of the errors says it is expected, the other says it is unexpected. Hmm, so you may be saying, “This is a contradiction!” Well, you would actually be right, and I will do my best to explain.
In our case, there is a totally different issue that only happens if you are writing or pasting code in a Divi module in the Advanced tab in the Custom CSS toggle in the Main Element CSS box. So in reality, the error message is simply confused – there is no better way to let us know that there is a bigger issue, so it gives us these errors. If you are not familiar with the bigger issue, then I totally understand your confusion, but that is why I am writing this guide. The bigger problem causing this error to happen is simply due to the fact that you are pasting or writing the code in the wrong location.
The Wrong Location
Most likely you are seeing this issue when writing or pasting code within the Main Element code box in a module in the Divi Builder. You are probably trying to paste a code snippet you copied from a tutorial, but are getting the error. However, it is not possible to use a CSS selector within a module. That is because this module is already a selector. For example, the Text module CSS selector is .et_pb_text and this would be exactly the same selector as the Main Element box. Since the Main Element is already a selector, it would not be possible to add another selector within that one. The only possible code that you could write in this box would be CSS properties and values which would style the Main element, or in this case they would apply to .et_pb_text. For example, you could write “color: red;” in the Main Element CSS code box, but if you wrote “.selector {color:red;}” with the selector and curly braced it will not work.
The Solution
If you were facing this error in the Main Element of an Advanced tab of a Divi module, this is the wrong location for the code. You need to place the code either in the Divi>Theme Options> Custom CSS or in a child theme’s style.css file. Simply navigate to the backend of your website, hover over the Divi menu, and go to Theme Options. Scroll to the bottom, and you will see the Custom CSS box there, which is the correct location to place code like this with a selector.
NOTE: If you were getting the Expected RBRACE error in the Divi Theme Options, it means you are missing a closing curley brace, so be sure that each of the code blocks end with “}“.
Where To Paste The CSS Code
1. Divi Assistant
If you are using our Divi Assistant plugin, simply paste the code in the CSS tab in the custom code window in the Divi Visual Builder.
2. Child Theme
If you are using a child theme, paste this code into the style.css file. If you don't have a child theme, you can generate a child theme directly on your site or download our free child theme.
3. Divi Theme Options Integration
Otherwise, paste this code in your Divi>Theme Options>Custom CSS code box.
If you need help understanding where to paste the code, please check out our complete guide about where to add custom code In Divi.
Hello,
Thanks for the tip. However can you tell me why I still get the RBRACE error with this code:
:root{
/* ===== FONT SCALING ===== */
/* Select the min and max screen sizes you are working with */
–screen-min-width:30;
–screen-max-width:120;
/* Select the min and max font-sizes for each header type */
–h1-min-size:5.0;
–h1-max-size:20.0;
–h2-min-size:2.8;
–h2-max-size:10.8;
–h3-min-size:2.1;
–h3-max-size:8.4;
–h4-min-size:1.6;
–h4-max-size:6.2;
/* FONT SCALING CALCULATIONS – DON’T NEED TO EDIT */
–h1-slope: calc((var(–h1-max-size) – var(–h1-min-size)) / (var(–screen-max-width) – var(–screen-min-width)));
–h2-slope: calc((var(–h2-max-size) – var(–h2-min-size)) / (var(–screen-max-width) – var(–screen-min-width)));
–h3-slope: calc((var(–h3-max-size) – var(–h3-min-size)) / (var(–screen-max-width) – var(–screen-min-width)));
–h4-slope: calc((var(–h4-max-size) – var(–h4-min-size)) / (var(–screen-max-width) – var(–screen-min-width)));
–h1-intersection: calc((-1 * var(–screen-min-width) * var(–h1-slope)) + var(–h1-min-size));
–h2-intersection: calc((-1 * var(–screen-min-width) * var(–h2-slope)) + var(–h2-min-size));
–h3-intersection: calc((-1 * var(–screen-min-width) * var(–h3-slope)) + var(–h3-min-size));
–h4-intersection: calc((-1 * var(–screen-min-width) * var(–h4-slope)) + var(–h4-min-size));
–h1-preferred: calc(var(–h1-intersection) + (var(–h1-slope) * 100));
–h2-preferred: calc(var(–h2-intersection) + (var(–h2-slope) * 100));
–h3-preferred: calc(var(–h3-intersection) + (var(–h3-slope) * 100));
–h4-preferred: calc(var(–h4-intersection) + (var(–h4-slope) * 100));
–h1-min: calc(var(–h1-min-size) * 1rem);
–h1-mid: calc(var(–h1-preferred) * 1vw);
–h1-max: calc(var(–h1-max-size) * 1rem);
–h2-min: calc(var(–h2-min-size) * 1rem);
–h2-mid: calc(var(–h2-preferred) * 1vw);
–h2-max: calc(var(–h2-max-size) * 1rem);
–h3-min: calc(var(–h3-min-size) * 1rem);
–h3-mid: calc(var(–h3-preferred) * 1vw);
–h3-max: calc(var(–h3-max-size) * 1rem);
–h4-min: calc(var(–h4-min-size) * 1rem);
–h4-mid: calc(var(–h4-preferred) * 1vw);
–h4-max: calc(var(–h4-max-size) * 1rem);
–h1-font-size: clamp(var(–h1-min), var(–h1-mid), var(–h1-max));
–h2-font-size: clamp(var(–h2-min), var(–h2-mid), var(–h2-max));
–h3-font-size: clamp(var(–h3-min), var(–h3-mid), var(–h3-max));
–h4-font-size: clamp(var(–h4-min), var(–h4-mid), var(–h4-max));
} /* /root */
*{
box-sizing:border-box;
margin:0;
padding:0;
}
html{
font-size:62.5%;
}
body{
font-family:monospace;
font-size:1.8rem;
}
main{
width:min(100%, 120rem);
margin-inline:auto;
padding-block:4rem;
}
h1{
font-size: var(–h1-font-size);
text-align:center;
margin-bottom: 2rem;
}
h2{
font-size: var(–h2-font-size);
text-align:center;
margin-bottom: 2rem;
}
h3{
font-size: var(–h3-font-size);
text-align:center;
margin-bottom: 2rem;
}
h4{
font-size: var(–h4-font-size);
text-align:center;
margin-bottom: 2rem;
}
Hi Patrick!
I have checked and not able to see the RBRACE error. Where exactly are you adding the code?