Title: responsive widgets
Last modified: August 31, 2016

---

# responsive widgets

 *  [thinkdolphin](https://wordpress.org/support/users/thinkdolphin/)
 * (@thinkdolphin)
 * [9 years, 11 months ago](https://wordpress.org/support/topic/responsive-widgets-3/)
 * I added a row of widgets under the Featured pages on the homepage.
    Here is the
   code I used.
 *     ```
       add_filter( 'tc_default_widgets' , 'add_featured_page_widget' );
       function add_featured_page_widget( $defaults ) {
       	$defaults['fp_widgets'] = array(
                           'name'                 => __( 'Featured Pages Widget One' , 'customizr' ),
                           'description'          => __( 'Below the featured pages area on home' , 'customizr' )
   
       	);
       	$defaults['fp_widgets_two'] = array(
                           'name'                 => __( 'Featured Pages Widget Two' , 'customizr' ),
                           'description'          => __( 'Below the featured pages area on home' , 'customizr' )
   
       	);
       	$defaults['fp_widgets_three'] = array(
                           'name'                 => __( 'Featured Pages Widget Three' , 'customizr' ),
                           'description'          => __( 'Below the featured pages area on home' , 'customizr' )
   
       	);
           return $defaults;
       }
   
       add_action('__after_fp' , 'display_my_fp_widget');
       function display_my_fp_widget() {
           dynamic_sidebar('fp_widgets');
           dynamic_sidebar('fp_widgets_two');
           dynamic_sidebar('fp_widgets_three');
       }
       ```
   
 * I styled the widgets with CSS:
 *     ```
       aside#rss-3.widget.widget_rss, aside#text-5.widget.widget_text, aside#nav_menu-2.widget.widget_nav_menu {
           width: 25%;
           float: left;
           margin: 30px 0px 10px 100px;
       }
       ```
   
 * I am trying to make those three widgets responsive but it doesn’t seem to be 
   working. I added this to the style sheet:
 *     ```
       @media screen and (max-width:320px) {
       aside#rss-3.widget.widget_rss, aside#text-5.widget.widget_text, aside#nav_menu-2.widget.widget_nav_menu {
           width: 100%;
           margin: 5px; }
       }
       ```
   
 * I did try adding a div class to the widget code for each one but that took away
   the styling so I decided to just use the default “aside” so all I would have 
   to do is change the width and margins.
 * Any help would be appreciated. TIA

Viewing 1 replies (of 1 total)

 *  Thread Starter [thinkdolphin](https://wordpress.org/support/users/thinkdolphin/)
 * (@thinkdolphin)
 * [9 years, 11 months ago](https://wordpress.org/support/topic/responsive-widgets-3/#post-7434526)
 * I changed the media query to this and it worked!
 *     ```
       @media screen and (min-width:320px) and (max-width:480px) {
       aside#rss-3.widget.widget_rss, aside#text-5.widget.widget_text, aside#nav_menu-2.widget.widget_nav_menu {
           width: 100%;
           margin: 10px; }
       }
       ```
   

Viewing 1 replies (of 1 total)

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

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

 * 1 reply
 * 1 participant
 * Last reply from: [thinkdolphin](https://wordpress.org/support/users/thinkdolphin/)
 * Last activity: [9 years, 11 months ago](https://wordpress.org/support/topic/responsive-widgets-3/#post-7434526)
 * Status: not resolved