Learn some tips for troubleshooting styles in Modern Editor.
Topics covered in this article:
- Understanding styles
- Check Block Styles > This Block
- Check Block Styles > All Blocks
- Check STYLESHEET sections
- Check Mobile styles
- Check Visibility settings
These are some tips we've pulled together for reviewing styles in Modern Editor. WordFly support is available to help if you've tried these tips and need another set of eyes on it.
Before troubleshooting, be sure to have a good understanding of styles in Modern Editor and especially what to expect. We recommend setting global typography styles in STYLESHEET > General Styles and individual block styles in other STYLESHEET areas.
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 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 of Modern Editor.
Toggle to All blocks
Styles revealed in All blocks have been set in the STYLESHEET
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), list items, 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).
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.
Additionally, you might find that some content is only visible on desktop or mobile. In these cases, you can check a block's visbility options to see if it has been hidden from one view.
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 grayed 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 grayed 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 grayed 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 grayed 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.