Problem with widget appearance on wordpress site


#1

At the moment I am using the Twitter (jetpack) option to display my tweets on my Wordpress site. This works well but is rather plain, and after discovering the Twitter widget I was delighted to see how great it looked.

I made a few changes and after settling on a design I ‘grabbed’ the code and pasted in the relevant place. The box and tweets display fine but there is an issue with my username/logo at the top of the box. They don’t look as they should and I can’t figure out why. The logo has moved position and looks smaller and the name of my account has been made smaller and is all scrunched up.

I use Chrome, but have checked on other browsers and the problem still arises. I would love to get this sorted and was guided here by the Twitter support team.

I can supply the code I use and anything else needed.

Many thanks.


#2

If it is about the look of your name and logo, It may be a styling (css) issue too. Why don’t you check out the css classes of your twitter widged using firefox’s firebug. You, may once you find the classes, try to put your styling in place. Why don’t you paste the code here.


#3

Hi Sedar,

Here is the code requested. I’m not too good with the technical stuff, so not too sure about the CSS side of things sorry!

Thanks.


#4

I am sorry but I can not see in this code anything related to the way your username and profile info is displayed. I am afraid you might still need to use firebug and get the css class for that.


#5

Can you share a live URL which demonstrates the problem?


#6

No problem, I will add the widget now so you can see the issue. The website is www.upthevilla.com and the widget is near the bottom on the right hand side.

As you can see there still seems to be the aforementioned issue.

Thanks all.


#7

whatever the url is in my email address INVALID_SYNT is crowding my emails how do I get rid of it?


#8

The crowded letters are due to
letter-spacing: -2px;
on line 219 of base.css

The text being pushed down are due to
clear: both;
on line 216 of base.css

Removing those rules should fix the widget but will probably break some styles on your site - I’ll leave it up to you how to fix, but I would look into increasing the specificity of my h<1,2,3,etc> rules.


#9

Hi Arne,

Apologies where to do I find the aforementioned code? As I can’t see it on the code pasted earlier. As mentioned my coding knowledge isn’t great, hence why I went for the simple option of letting Twitter do the work and create the widget for me!

Thanks.


#10

I’m having a similar issue in almost all versions of Firefox & Windows. Following is a screenshot that shows my client’s Twitter Account Logo enlarged far beyond the small thumbnail that it should be:

http://crossbrowsertesting.com/users/31037/screenshot/z39d1beefc04ae397e94/public?full

I’ve dropped the code generated via the Twitter Widget generator into a Text Widget in WordPress and placed it in the footer of my theme. Can’t seem to find a WordPress plugin that includes styling options beyond a stripped down version of the Twitter feed. Thoughts anyone?


#11

Problem with widget appearance on wordpress site.


#12

Problem with widget appearance on wordpress site.


#13