Widget out of line with sidebar

Hi breakstay,

We have done our best to ensure it looks consistent across every site, but we never know what your theme’s styles (CSS) will be, which makes it very challenging. Could I see this live on your site? It might be that I can improve our default styling so that it fits into your theme perfectly too.

Alternatively, you can control the style of the widget by editing your own themes CSS file, but I would need to see it live for me to be able to tell you what you would need to add.

Currently the widget should be the full width of the container, but it could be that your theme is applying some other effects to it, the most common/likely would be a margin-left to the un-ordered list (ul) element.

Hi Peter,

Thanks for your quick response.

The theme is Tesla from https://teslathemes.com/

An example where you can see this is at the bottom of the sidebar on

https://www.haydnmarshall.com/music-category/

Kind Regards

Haydn

Hi Haydn,

I see what you mean now, this is caused by a CSS change I added in the last couple of weeks to fix the display on some browsers on certain themes. Clearly it was not thought out well enough, as now I can easily see how it would cause this problem (and you are surely not the only person suffering it).

I will be working on updating the plugins CSS to resolve this (and still fix the previous problem). In the meantime if you have access to edit your theme/sites CSS you can fix it using this CSS:

html body .kebo_twitter_feed_widget ul.kebo-tweets {
    width: auto;
}

I will also post back here once I have updated the CSS, this might take a while as I have to take into account the previous problem too.

Hi Peter,

Thanks for your reply.

I have tried to add the CSS you posted into the style.css of the template but it doesn’t seem to have any effect.

html body .kebo_twitter_feed_widget ul.kebo-tweets {
    width: auto;
}

I’ll await your plugin solution., Thanks for looking into it.

Kind Regards

Haydn

Hi Haydn,

Sorry the suggested CSS did not have the desired effect. I will try to ensure I finish the update this evening, I will post back once I have updated the plugin!

Hi Haydn,

I just wanted to give you an update, as it is taking me longer than expected to find a solution to this. I am still working on finding an alternative way to fix the problem, which the current CSS I need to change was added to fix. As this is live on so many sites I need to do my best to ensure I am not doing more damage than good to live sites.

As I need a little longer I checked your site quickly and can see why the CSS you added into your theme.css file is not working. It is inside of a media query, so it only works if the page width is less than 479 pixels wide.

Currently the end of your theme.css file looks like this:

.logo{
        float: none;
        margin-top: 0;
        margin-bottom: 0;
    }
html body .kebo_twitter_feed_widget ul.kebo-tweets {
    width: auto;
}
}

To get it working the end of the file needs to look like this:

.logo{
        float: none;
        margin-top: 0;
        margin-bottom: 0;
    }
}
html body .kebo_twitter_feed_widget ul.kebo-tweets {
    width: auto;
}

That should get it looking right on your site and I will update the plugin as soon as I am confident that my changes will not damage other websites.

Hi Peter,

Thanks for the update.

I changed the code as you suggested and it’s looking good. Thanks for that, really appreciate it.

Haydn

Wanted to say thanks as well.
Fix my wide widget issue.