How to resize WordPress Widget Area

How many times have you posted an Ad or anything else into one of your widget areas on wordpress, and realized that it doesn’t fit the widgets layout or size?
YES, this is VERY frustrating, but look no further. We have the solution!

A lot of you have custom made themes out there, and some of you may also have created your own in “Artisteer”, an easy to use application that makes good themes for different platforms.
The problem with most of the themes out there is that there is no good definition around the naming of widget areas. To be honest, i don’t think this is your first thoughts when whipping up a theme for your site.
It’s not until later that you realize that one of the widget areas of your theme are too small or not fitting the content you put into it.

Luckily, there are hope out there!
Even thou the widget area has not been defined as something normal that would make sense to us in form of text in the themes CSS code, it has been defined, but you need to look for it.
Here’s how you do it.

The first thing you need is a web browser. (Hopefully you are using one to see this webpage.)
The second thing you need in your browser is a plugin that has the ability to inspect the code on your site.
In this example we will use the FireFox browser with a plugin called “FireBug”.

firebug

There are Inspection plugins for almost every browser, but FireFox is the one we use (or at least what I use, i don’t know about the rest of the staff)

If you don’t have Firefox and wish to use it, you can get it here.

If you have FireFox, but is missing the FireBug plugin, you can find this here.

Now let’s begin.

Now this should be basic for every browser.Open up you page where you can see your widget area.
Start your Inspector plugin. In FireFox you right click somewhere on your page and click “Inspect Element with FireBug
Click on “Click an Element in the page to Inspect
You will now see that places on your page will be marked as you move your cursor around your page.
Find the outer border of the widget you wish to alter, and click it. In the inspector view below you will now see the code of the area that you have clicked.

Now, here’s the trick.
In this area, look for a string called: <div id=”text-*some numbers*”> The ** would be a number. If you inspect our page, you will see that the top widget is called <div id=”text-14″>

Remember that number, and logon to your admin page.

codeYou need to have JetPack plugin for this to work.
Go to “Appearance –> Edit CSS”
Now in the Editor that comes up, write the following code;

#text-14 {
height: auto;
}

Change the number 14 with the number you have to change the size.
In this case we used “auto” on the height. This auto adjust the height based on the content.
If you need to set a specific size, just type height: <your size in pixels>px (ex. “height: 60px;”)

Click save, and have a look at your page.
It should have changed the size of your widget box.

NB: Guess this only works with the Text box widgets. That’s why it shows up as text-14. We haven’t tried with the other widgets.

Leave a Reply