Title: Make footer widgets different widths
Last modified: August 21, 2016

---

# Make footer widgets different widths

 *  [jane@accesspublishing.com](https://wordpress.org/support/users/janeaccesspublishingcom/)
 * (@janeaccesspublishingcom)
 * [13 years, 1 month ago](https://wordpress.org/support/topic/make-footer-widgets-different-widths/)
 * I’ve installed a social media widget, a text widget and an image widget in my
   footer sidebar. I would like to make the center text widget wider and the two
   side widgets smaller.
 * How do I go about this?
 * Also how can I change the height of the footer area? Or more likely the area 
   of the image widget? When I inspect the image there is a lot of space around 
   it.
 * Here is the website address: [http://a1glass.accesstestsites.com/](http://a1glass.accesstestsites.com/)
 * Thanks for your help!

Viewing 1 replies (of 1 total)

 *  [W.P. Ginfo](https://wordpress.org/support/users/wp-ginfo/)
 * (@wp-ginfo)
 * [13 years, 1 month ago](https://wordpress.org/support/topic/make-footer-widgets-different-widths/#post-3709404)
 * Add the following code to the `style.css of your <strong>child</strong>theme
 * To control the section on the right:
 *     ```
       #colophon .widget {
           float: left;
           margin-left: 2.97%;
           width: 12.35%; /*play with these values*/
       }
       ```
   
 * To control the width of the textwidget:
 * .text-5{
    width:150px; /*play with these values*/ }`
 * You probably doNOT have to change th left set:
 *     ```
       .tipsy-social-icon-container {
           width: 100%;
           float: left;
       }
       ```
   
 * You don’t have a childtheme yet?
    1. **Install **and _activate _‘one click childtheme **plugin**
    2. **create ** the child**theme**
    3. activate the child**theme**
    4.  Make the changes in the CHILDtheme!
        – copy php files / css-file(s) of the 
       original theme [as required] to the childtheme directory and edit them as required.
 * == == ==
    About finding out ‘which things to change in your site [css / html /
   php]
 * Well it’s all a bit like trying to solve a puzzle.
    Fortunately there are good
   tools for that. In your browser: Install / activate webdevelopment add-ons / 
   plugins.
 * Recommended: ‘Firebug’ and ‘webdeveloper: [http://www.chrispederick.com](http://www.chrispederick.com)‘
   
   These tools will show you what’s what. e.g. right-click > inspect elements > 
   click left bottom arrow-icon click item in webpage Inspect css on the right alter
   css values to test effect / result OK? copy altered css rule paste it in the `
   style.css` of your childtheme.
 * Alternatively:
    Press <F12> a screen will show in the bottom. Move the mouse 
   over each line The area shows in the top-half Press + to unfold parts Investigate
   and alter on the right etc. paste it in the `style.css` of your childtheme.

Viewing 1 replies (of 1 total)

The topic ‘Make footer widgets different widths’ is closed to new replies.

 * ![](https://i0.wp.com/themes.svn.wordpress.org/attitude/4.0.6/screenshot.png)
 * Attitude
 * [Support Threads](https://wordpress.org/support/theme/attitude/)
 * [Active Topics](https://wordpress.org/support/theme/attitude/active/)
 * [Unresolved Topics](https://wordpress.org/support/theme/attitude/unresolved/)
 * [Reviews](https://wordpress.org/support/theme/attitude/reviews/)

 * 1 reply
 * 2 participants
 * Last reply from: [W.P. Ginfo](https://wordpress.org/support/users/wp-ginfo/)
 * Last activity: [13 years, 1 month ago](https://wordpress.org/support/topic/make-footer-widgets-different-widths/#post-3709404)
 * Status: not resolved