Add media queries to the Masonry index WordPress: Responsive Themes


show more Adding media queries to the Masonry index provides you with in-depth training on Web. Taught by Morten Rand-Hendriksen as part of the WordPress: Building Responsive Themes show less
please wait ...

Adding media queries to the Masonry index

jQuery Masonry is now hooked into the front page, working properly, and we have this nice Masonry front page on our site. When all this is done, we need to make sure this layout looks good on all the devices and all screen sizes, and that includes the very smalles screen size, that vertical phone. If you remember back to when we made the media queries, when we scaled this window down to a smaller size, so equivalent to that small phone, we have a 20-pixel padding on the left and it 20-pixel padding on the right.

The problem is the box here in the Masonry layouts is 300 pixels wide, meaning the total width here is 340 pixels, whereas the phone's screen size is 320 pixels. What we need to do is reduce this padding for just this smaller size so that when people use their phones and hold them vertically, they'll get 320 pixels across exactly. What we need is a new media query targeting just this situation.

To add the new media query, we'll go to our style.css file, scrol...

Adding media queries to the Masonry index
Video duration: 2m 54s 2h 55m Intermediate

Viewers:

Adding media queries to the Masonry index provides you with in-depth training on Web. Taught by Morten Rand-Hendriksen as part of the WordPress: Building Responsive Themes

Subject:
Web
Software:
WordPress
Author:
please wait ...