Title: help making footer widgets responsive
Last modified: August 21, 2016

---

# help making footer widgets responsive

 *  [pietergoosen](https://wordpress.org/support/users/pietergoosen/)
 * (@pietergoosen)
 * [13 years ago](https://wordpress.org/support/topic/help-making-footer-widgets-responsive/)
 * hi there
 * i need help, created a twenty twelve child theme and added 4 footer widgets, 
   here are the css
 *     ```
       #footerwidget {
       	padding: 1rem 1rem;
       	padding-bottom: 0;
       	overflow: hidden;
       	width: 98%;
       	display: block;
       	float: center;
       }
       /* Two Widget Areas */
       #footerwidget.two .widget-area {
       	float: left;
       	margin-right: 4%;
       	width: 46.7%;
       }
       #footerwidget.two .widget-area + .widget-area {
       	margin-right: 0;
       }
       /* Three Widget Areas */
       #footerwidget.three .widget-area {
       	float: left;
       	margin-right: 4%;
       	width: 29.7%;
       }
       #footerwidget.three .widget-area + .widget-area + .widget-area {
       	margin-right: 0;
       }
       /* Four Widget Areas */
       #footerwidget.four .widget-area {
       	float: left;
       	margin-right: 4%;
       	width: 21.3%;
       }
       #footerwidget.four .widget-area + .widget-area + .widget-area + .widget-area {
       	margin-right: 0;
       }
       ```
   
 * how do i make them responsive. i want these widgets show beneath each other in
   small screens, not next to each other. been trying the whole day. i’m missing
   something somewhere

Viewing 1 replies (of 1 total)

 *  [zeaks](https://wordpress.org/support/users/zeaks/)
 * (@zeaks)
 * [12 years, 5 months ago](https://wordpress.org/support/topic/help-making-footer-widgets-responsive/#post-3693972)
 * Clearing them and changing width to 100% should make them display one on top 
   of the other on mobile. Make sure to use [@media](https://wordpress.org/support/users/media/)
   to target smaller devices. Here’s an example
 *     ```
       @media only screen and (max-device-width: 480px) {
          #footerwidget {
             width: 100%;
             clear: both;
          }
       }
       ```
   
 * Something like that

Viewing 1 replies (of 1 total)

The topic ‘help making footer widgets responsive’ is closed to new replies.

## Tags

 * [twenty twelve](https://wordpress.org/support/topic-tag/twenty-twelve/)

 * 1 reply
 * 2 participants
 * Last reply from: [zeaks](https://wordpress.org/support/users/zeaks/)
 * Last activity: [12 years, 5 months ago](https://wordpress.org/support/topic/help-making-footer-widgets-responsive/#post-3693972)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics