Creating Responsive CSS

  • Resolved widefoot

    (@widefoot)


    11 years, 2 months ago

    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 for reference.

    Thank you

    https://ww.wp.xz.cn/plugins/wp-instagram-widget/

Viewing 4 replies - 1 through 4 (of 4 total)
  • Plugin Author Scott (@scottsweb)

    (@scottsweb)

    11 years, 2 months ago

    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

    (@widefoot)

    11 years, 2 months ago

    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)

    (@scottsweb)

    11 years, 2 months ago

    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/.

    It will not be supported by some versions of IE.

    Thread Starter widefoot

    (@widefoot)

    11 years, 2 months ago

    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.