How to Fix the Width In a Plugin/Widget Box (16 posts)

  • I recently moved my blog (http://virtuallyondemand.net/blog/) to WP, and am learning my way around. One thing I cannot figure out after spending hours online researching, is how to fix the width on the FB and Twitter boxes in the sidebar to match the width of the boxes above them.

    I don’t know a thing about code, so maybe you know of an online resource with step-by-step instructions and screen prints that can walk me through the process of changing it.

  • what plugin are you using Karen?  I believe that you can just change the width and the height from within the plugin – I do this and am pretty well versed with wordpress – but need to know the plugin  you are using

  • I can help you with this – just went to your blog to see what you were talking about

  • @karenataylor

    It looks like you are using a text widget for your facbook like box so I’m going to make the assumption that you obtained your code from http://developers.facebook.com/docs/reference/plugins/like-box/

    Below is an image of that interface with the width parameter outlined in a red box

    After you click the “Get Code” button you see this

    I’m guessing that the code under #2 is what is in your “Text Widget” so all you need to do is go in and update the data width to 268 and you should be good to go, well at least for facebook like box.

    The twitter feed looks ok, so I’m not sure if you wanted to adjust that or not. It looks like you’re using the Tweet Blender plugin, they may have a width option within the plugin settings. 

    Cheers!
    Jules

  • @juleswebb Yippee, it worked! *happy dance* Thank you!

    @juleswebb @judymusgrove I am using the Tweet Blender plugin. I went to the plugin area and clicked Edit so I could change the width (the width is too wide on the right). A good 20 files appear on the right ending in .css, .js, .php and so on. I opened a few random files and did a word search for “width” and “margin”, but nothing came up. So I don’t know which file contains the width code.

    Anyone know what file I should edit?

  • @karenataylor

    I just looked at your blog and it seems like your tweet feed is all set. Are you good to go?

  • @juleswebb No, the box is still too wide on the right. :( Can you post a screen print of what you see; maybe the box appears normal to you?

  • @karenataylor

    This is what it looks like in chrome, firefox, safari and IE8
    What browser are you viewing it in?

  • @juleswebb I use IE8. It looks fine in the screen print, but when you look at the box compared to the one above it, the right margin is too wide. I’m going to leave it as is for now. I appreciate your help!

  • @karenataylor 

    I’m just not seeing this, in IE or any other browser that I’ve viewed it in. Have you tried refreshing your browser (ctr r on PC) If this doesn’t change anything you can try clearing your cache. I’m asking you to do this in case there is some cached css file that is effecting the layout.  

    My other question is: Are you seeing this on every blog post or just one? If just one there may be something on that page that is effecting the layout.

  • @juleswebb I see it on every page (main and individual post pages). I didn’t think about the cache, so I installed the WP Super Cache plugin. I received a warning, though that my blog is writeable and I need to change the file permissions. So I followed the directions, but I don’t have access to the permissions (I use Go Daddy). I sent them a support email asking them to resolve this, so hopefully I will hear from them soon.

    Can I still turn on the cache, or should I leave it disabled? I’m adding @kristi-hines to this because she also knows her stuff and uses Go Daddy.

    Thank you!

  • @karenataylor  I do see this in IE7 and below ( compliments of IE Tester ). Are you using IE7 or lower? It does not appear in any other Browser on my side. You should be able to fix this by simply adding this code to your style.css. It can be done through Dashboard -> Appearance -> Editor -> style.css 

    #tweetblender-2 {max-width:300px;} 

    But do be careful! The wrong mistake can create all kinds of new problems. 

  • @karenataylor

    When I said empty your cache I meant your browser cache on the machine you are viewing the web page in. You’re browser caches (saves) files from web pages you view so that you don’t have download the the same file every time you load a page from that website. Refreshing your page will force (usually) your browser to go grab all the files again, instead of relying on a cached version.

    WP Super Cache plugin sets up rules and instructions about what files are to be cached by browsers and for how long. It’s definitely a worth while plugin, but not what I was talking about.  

    @jasonwiser said he found the layout issue you described in IE7 and what he suggest should work.

    Let us know if you run into any problems

  • @jasonwiser I use IE8.

    @juleswebb I clear my browser cache several times a day. If it looks fine with IE8 and the other browsers you mentioned above, then I will leave it as is.

    Thank you!

  • @karenataylor Though you are using IE8 it is possible to have an early version of IE8 which would explain why the layout is presenting similar to IE7. 

    I use Google’s chrome for most of my internet browsing.  You might consider trying it out. Because Chrome supports more modern css and html rules than IE you’ll have better visuals and overall user experience while surfing the internet.

  • @karenataylor regardless which browser you are using to view, it is best practice to fix these bugs when you find them. And max-width is an important markup especially with re-size / fluid width layouts. 


Add your voice to the discussion

Existing members: . If you do not have a SME account, .

 
 
Check out the Social Media Marketing Podcast!

Networking Clubs Leaderboard

Avatar ImageE
Kristy C. CartierKristy
Ann at  greenoakAnn
Avatar ImageAndré
Avatar ImageJudith
Kapil MudholkarKapil
Avatar ImageScott
Avatar ImageJoleen
Avatar ImageLydia
Taryn MurrayTaryn
Learn more about the Networking Clubs

Recently Active Members

Jeff Kaplan
Profile picture of
Danielle Greason
Suchi Goyal
Profile picture of
Profile picture of
Deanna Viele
Profile picture of
Gregg Breward
Jeremy Pepin
Ann at  greenoak
Tanguy Hubner
Profile picture of
Profile picture of
Profile picture of

Today’s Popular Articles