widgets overwriting one another

[Jane Jones]

I am having the problem of a twitter feed widget being overwritten by other widgets. Even if I move the order of the widgets around, each time some widget is being overwritten by another. I am also using the two column wide “post” feature and that is sometimes overwriting other widgets, depending on the order in which they are listed in the “bottom of page” collection box. Thank you for any help that you can provide.

[Bill Robbins]

Hello Jane,

The home page uses a script called Masonry to position the widgets so that there aren’t large vertical gaps between them. But for widgets that load content after the page has loaded, that can cause trouble as the layout is already fixed.

The way we can get around that is by using CSS to set the height of the widget. Every widget has a unique ID that we can use as a styling hook. It looks like the twitter timeline is in a widget with the id of text-2. So here’s how we’ll approach that:

1. Go to your theme options page and choose the Style tab.
2. Scroll down to the Custom CSS box and add this:

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

3. Update your settings.

Check and see how the widget lines up now. If it’s still not tall enough, you can make the 500 in the snippet above taller to give it more room. If it’s too tall, then reduce the 500 so it’s not excessively big.

Let me know if you have any trouble there.

Thanks,
Bill

[Bill Robbins]

In your source code, this is the section that has the text widget we’re working with in it:

<div id="text-2" class="widget widget_text shadow"><h4 class="widget-title">Follow Us on Twitter</h4>			<div class="textwidget"><a class="twitter-timeline" href="https://twitter.com/tenantneighbor" data-widget-id="544320669266485248">Tweets by @tenantneighbor</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script></div>
		</div>

This opening line: iv id="text-2" class="widget widget_text shadow" has several useful hooks to apply styling to. Since we only want to target this specific text widget, I opted to use the id which is text-2.

In the CSS, we can target just this widget by the ID like this:

#text-2 {
     Styles go here
}

WordPress adds lots of ID’s and classes to our widgets, posts and so on so that things can be styled very specifically.

Hope that helps out,
Bill

[Bill Robbins]

Thanks Jane…Merry Christmas and Happy New Year to you too 🙂

[Author]

Posts