When there are multiple lines in a widget, the editor will create paragraphs for each line (8). Some styling might change because there is already a defined style for <p> tags. Here we can see the change for margin.
Build your output and use inspect tool to investigate paragraphs in your widget(9). You can also see in the 'Styles' section of developers tool the Style that is defined for paragraphs(10)
In this case, we can create a new style for all paragraphs in our project or create a new style rule that will refer only to paragraphs in our widget. To create a rule that will apply to our widget we have to add a code to apply to paragraph only within the Widget element.
Add a style rule with a selector of "div .i-filtered-content-CommandLine p" in your CSS (11). That CSS selector will only apply to paragraph elements that are within our Language Filtered Section Widgets.
Click on a 'Visual' tab and set the margin values. Ensure that you have the correct Style Rule selected (12). Select the left side the element you want to edit(13). Pick a Box from Attributes and add your style for margin(14).
When going back to the 'Source' tab you should see your style rule automatically applied to your chosen element.
Save your project and go to your Topic editor. The changes will be applied and new margins for paragraphs in our widget should be visible:
0 Comments