Home Widgets Overlapping on Desktop and Mobile

Support Area Forums Foundation Home Widgets Overlapping on Desktop and Mobile

This topic contains 2 replies, has 2 voices, and was last updated by Tangeray Tangeray 11 months, 1 week ago.

Viewing 3 posts - 1 through 3 (of 3 total)
URL to the page in question: http://www.EmissionsTax.org
  • Author
    Posts
  • #38236
    Tangeray
    Tangeray
    Participant

    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!

    #38238

    Bill Robbins
    Moderator

    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

    #38423
    Tangeray
    Tangeray
    Participant

    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!

Viewing 3 posts - 1 through 3 (of 3 total)

The topic ‘Home Widgets Overlapping on Desktop and Mobile’ is closed to new replies.