Title: Creating Responsive CSS
Last modified: August 24, 2016

---

# Creating Responsive CSS

 *  Resolved [widefoot](https://wordpress.org/support/users/widefoot/)
 * (@widefoot)
 * [11 years, 2 months ago](https://wordpress.org/support/topic/creating-responsive-css/)
 * First off, thank you for the great plugin, I just wish I was better at CSS. I
   would like to make my instagram feed responsive to the screen size. For full 
   screen I have entered that I want to display 12 images within the widget and 
   my CSS looks like this
 *     ```
       .instagram-pics li {
       	float: left;
       	width: 16%;
       	list-style-type: none;
       	padding: 15px;
       }
       ```
   
 * This way I get 6 columns by 2 rows. However I would like for that to scale down
   with screen size. I am thinking I would like to get 4 columns by 2 rows for tablet
   sized screens, and get 2 columns by 2 rows for mobile sized screens. How would
   I go about doing this?
 * My website is [http://www.widefootdesign.com](http://www.widefootdesign.com) 
   for reference.
 * Thank you
 * [https://wordpress.org/plugins/wp-instagram-widget/](https://wordpress.org/plugins/wp-instagram-widget/)

Viewing 4 replies - 1 through 4 (of 4 total)

 *  Plugin Author [Scott (@scottsweb)](https://wordpress.org/support/users/scottsweb/)
 * (@scottsweb)
 * [11 years, 2 months ago](https://wordpress.org/support/topic/creating-responsive-css/#post-5990761)
 * Media queries are not as scary as they sound. Have a play with the following 
   CSS:
 *     ```
       .instagram-pics li {
       	float: left;
       	width: 16%;
       	list-style-type: none;
       	padding: 15px;
       }
   
       @media (max-width: 600px) {
          .instagram-pics li {
             width: 30%;
          }
       }
   
       @media (max-width: 400px) {
          .instagram-pics li {
             width: 50%;
          }
       }
       ```
   
 * Adjust the max-width and width values according to your requirements.
 *  Thread Starter [widefoot](https://wordpress.org/support/users/widefoot/)
 * (@widefoot)
 * [11 years, 2 months ago](https://wordpress.org/support/topic/creating-responsive-css/#post-5990817)
 * Thanks for the reply Scott!
 * This works great for creating the amount of columns I want for the respective
   screen size. However the other problem I am working on is changing the amount
   of images that are displayed. When width=50% there are two columns, but now there
   are 6 rows and I would like to only have two rows. Would the fix be in specifying
   that I want to display 4 images thus getting 2 columns and 2 rows. Is it possible
   to specify this for each screen size?
 *  Plugin Author [Scott (@scottsweb)](https://wordpress.org/support/users/scottsweb/)
 * (@scottsweb)
 * [11 years, 2 months ago](https://wordpress.org/support/topic/creating-responsive-css/#post-5990846)
 * You can choose to hide specific images at various screen sizes but it is a bit
   of a hack. Give this a go:
 *     ```
       @media (max-width: 600px) {
          .instagram-pics li {
             width: 30%;
          }
   
          .instagram-pics li:nth-child(5),
          .instagram-pics li:nth-child(6) {
             display: none;
          }
       }
       ```
   
 * This should hide the 5th and 6th image on devices less than 600px wide. You can
   also provide a range (e.g. nth-child(n+6) to hide anything after the 6th image)
   as described here: [http://nthmaster.com/](http://nthmaster.com/).
 * It will not be supported by some versions of IE.
 *  Thread Starter [widefoot](https://wordpress.org/support/users/widefoot/)
 * (@widefoot)
 * [11 years, 2 months ago](https://wordpress.org/support/topic/creating-responsive-css/#post-5990904)
 * Scott,
 * Thanks for the reply, this fix works. Thank you!

Viewing 4 replies - 1 through 4 (of 4 total)

The topic ‘Creating Responsive CSS’ is closed to new replies.

 * ![](https://s.w.org/plugins/geopattern-icon/wp-instagram-widget_d7eadd.svg)
 * [WP Instagram Widget](https://wordpress.org/plugins/wp-instagram-widget/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/wp-instagram-widget/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/wp-instagram-widget/)
 * [Active Topics](https://wordpress.org/support/plugin/wp-instagram-widget/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/wp-instagram-widget/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/wp-instagram-widget/reviews/)

 * 4 replies
 * 2 participants
 * Last reply from: [widefoot](https://wordpress.org/support/users/widefoot/)
 * Last activity: [11 years, 2 months ago](https://wordpress.org/support/topic/creating-responsive-css/#post-5990904)
 * Status: resolved