Home Widgets Overlapping on Desktop and Mobile

[Tangeray]

Hi Bill,

I’ve had an issue where the Twitter/html widget overlaps the sponsor bar on the home page. Also has issues if I remove blog posts/add posts.

Any thoughts?

Thank you!

[Bill Robbins]

Good question. With widgets that load their content from another website like a Twitter or Facebook widget, it’s usually a good idea to set a minimum height in the CSS. The embed code often has a height set, but also adding it to the CSS can be helpful. You just want to make sure that the widget is set to be tall enough that once the content loads, it won’t end up being any taller than that.

The script that arranges the widgets takes the height once the images are loaded and positions the images based on that height. If the height changes afterwards, the script will not reevaluate the placement. That’s typically the case of overlapping widgets there.

For this particular widget you might be able to use something like this:

#weblizar_twitter-2 { min-height: 500px; }

You can adjust the 500px there for the right fit. See if that doesn’t help out.

The images will readjust if the screen size changes past a breakpoint, but otherwise any changes to the size of any of the widgets after the page is loaded will not be taken into consideration by the script.

Hope that helps out,
Bill

[Tangeray]

Hi Bill,

Thank you, that works well and helps me understand css a little better. I’m going to add more blog posts instead of asking how to keep the home bottom widgets to the right.

Any thoughts on a new Non-Profit theme?

Thank you!

[Author]

Posts