Here are some tips or reviewing styles in the editor. Before troubleshooting, be sure to have a good understanding of styles and especially what to expect. We’re here to help if you’ve tried these tips and need another set of eyes on it.
Check styles
Check Block Styles > This Block
Check individual block styles by clicking the block from the preview panel, then on the edit panel click Styles. You can then review This block styles. In this check, you are reviewing styles that have been set on this specific block, not globally. For example, if the link color is different in this block, most likely the link element for this block has been adjusted for This block.
Check Block Styles > All Blocks
Check global block styles by clicking the block from the preview panel, then on the edit panel click Styles. You can then toggle over to All blocks styles. In this check, you are reviewing styles that have been set globally on blocks like this. When a style is applied globally, you will also find the style under the main Stylesheet section.
Toggle to All blocks
Styles revealed in All blocks have been set in the Stylesheet
Check Stylesheet sections
Check global block styles in the Stylesheet sections to locate where a style has been set globally.
Stylesheet > General Styles usually globally sets styles for typography elements like Base which sets the font at the highest level, and then individual elements set typography more specifically like paragraph, fine print, link, strong (bold), emphasis (italics), lists, and headings. You can also set a global style for buttons, images in text blocks, and block width and spacing in this area.
Other sections in the Stylesheet area are Single Blocks, Structural Blocks, and Grouped Blocks. Check any of these sections for global container settings like background color, widths, and spacing (padding and margin).
Check Mobile styles
Sometimes a style might only be different on mobile. Use the preview slider to reveal elements that are different from desktop to mobile. For example, the mobile styles can be changed and columns can scale or switch stacking.
Check Visibility settings
Additionally, you might find that some content is only visible on desktop or mobile. In these cases, you can check a block’s visibility options to see if it has been hidden from one view.
Step-by-step troubleshooting example
Troubleshooting styles usually takes a little looking around to see where the styles are set individually and globally to then determine what needs to be adjusted. We'll walk through an example of adjusting a bold style that was set differently in the design than what was desired. You might encounter similar issues with block width, or spacing (padding or margin), or perhaps with font-family for paragraphs or headings. Using similar steps you can troubleshoot where a style will need to be adjusted.
Let's review a case where a bold style (strong) is not applied as expected in one text block.
1. Click on the text block from the preview panel
2. Then click over to the Styles on the edit content panel
3. Check This block styles. What is set for the strong element?
Check for greyed out values in the fields, and pay attention to the font weight too. Normally regular text is around 400 or 500 font weight, and bold is a higher font weight like 700.
Let’s say that there's a greyed out font weight of 500 here. This means that we need to check All blocks to determine where the weight is set.
4. Check All blocks styles next. What is set for strong font weight?
Let’s say the font weight is also greyed out as 500 here as well. This means that we need to check Stylesheet to determine where the weight is set for this style.
5. Click on the Stylesheet
This is where global styles are set.
6. Under Stylesheet > General Styles, check the strong element. What is the font weight value?
Here we find that the font weight is 500 and it is not greyed out like the other views from the text block styles. Since we know that we don't want 500 we can remove this. When we remove 500, the bold style is corrected in the text block because the default global setting for bold is then applied.
