Frutis Frutis - 4 months ago 8
CSS Question

Wordpress facebook comment plugin is displayed on top

have a small problem with facebook comments. For some reason my theme is not very compatible with the plugin.

enter image description here

If you click to inspect the element, it will fix on it's own then (no idea why).
Also I would like if you add more text into the comment box the content below the box doesn't move down. So is there a way to align the box correctly only with the css? ( I have tried 2-3 different plugins, but I had the same problem)


P.S. it works great on a singple post, but something is wrong inside the home page...

Plugin used:


The problem lies in the absolute positioning of the .blog-grid elements. The position and top values are explicitly declared and set as inline styles before the facebook comment box is appended to the element. So these calculations don't factor in the additional element because they occur before it's introduced.


.blog-grid.element.column-1.masonry-brick {
    position: relative !important;
    top: auto !important;

The above rules will over-qualify the inline rules for every instance of the element since the !important declaration has been used. If you want these rules to only apply to the home page, add .home as a preceding selector before .blog-grid, same methodology would apply to archive pages or specific taxonomy type pages.