I am suddenly finding problems with alignment of some divs – especially those with borders. On examining the output (using the inspector built into Chrome) I can see that empty paragraphs <p></p> are being inserted. As paragraphs have site wide styling (margins) these empty paragraphs cause alignment issues.
For example I recently created some ‘cards’ in CSS that worked fine, but now they are picking up the empty paragraphs so are displaying incorrectly. I have attached a screenshot of the page with the inspector open showing the offending empty paragraph on the middle card. The one on the left I have hidden the empty paragraph, so it has returned to normal. As these paragraphs are not in the HTML I cannot correct them, but as you can see from the inspector, they come from ‘user agent stylesheet’ – and this is greyed out, so I can’t even try changing it from the inspector.
I have inspected the circumference demo site, and only found one instance of this which you can see by inspecting the progress bars on the ‘left hand column’ demo page. In fact I’ll add a screenshot… As you can see the same empty paragraph, styled from the same ‘user agent stylesheet’.
Please advise on what I can do to prevent these being inserted into my pages, apparently arbitrarily, and seemingly increasingly.
We are really sorry but we are unable to view your screenshots, so please check once.
And regarding the media boxes which is kept in the demo is in different styles, so if you go to the theme package you can find the html snippets folder where you can get the code of media boxes in different or you can check it in the tutorial.