Viewers: in countries Watching now:
The advantage of making your site responsive is that you can create custom experiences. Depending on the size of the screen the visitor is using. One of the simplest and most impactful ways of doing this is creating pull quotes and pull images that break the rigid frame of the content. To literally pull quotes and images out to the sides. If you look at my original designs here, you see one of those pull quotes. It's right down here. And as you can see, the quote has been physically pulled out of the content, and shifted to the left side, just like our meta-content up here.
And the idea is, when you get enough screen that's big enough. We can pull the left and right aligned quotes and also the left and right aligned images out of the content like this either on the left or on the right. So when I created this setup I had to then go and do the math and figure out at what point do we have enough room. To pull the content out to the left, and also out to the right. And I found that those two break points are at different points. So to see what's going on here, I opened two posts.
I have the post format standard post, where you'll remember, I inserted the block quote and floated it to the left and also to the right. And I also went and found another post called Image Alignment. And here you see we have images that are aligned to the left and images that are aligned to the right. Now we're going to create two media queries that target screens that are very large. And on those very large screens, we're going to shift both the block quotes and the images out of the frame. And I say both block quotes and images because if we look at the markup for this image.
Which is a line to the left, you'll see just like the block quote we created in the previous movie. This image also has the class of line left associated with it. Same thing with the line right. That means if we create styles that target either a line left or a line right. And shift the content 160 pixels, either to the left or to the right, and wrap them in media querys. Then we'll shift both our images and our block quotes at the same time with the same style. Dry development principles, again.
To start off I'm going to find the alignments section in style.css. And you see it's here at 7.0. So I'm going to search for 7.0. This takes me to alignments. Here, we have alignments. And you that align left displays in line and flows to the left. Align right displays in line and falls to the right. And align center clears both sides and displays as a block. So here, we can now add media queries that will make align left and align right actually shift content, when we want it to.
So, if you go to your code-snippets, you see, here we have two very, very simple media queries,. That I'm going to paste in. The first one targets screens that have a minimum width of 1320 pixels, and it takes anything that's aligned left and shifts it 160 pixels to the left. Now remember this is exactly what we did to the metacontent. The second media query targets screens that are 1820 pixels wide or wider, and it does the exact same thing with alignment right. Only it shifts the images and the block quote out from the right hand side.
Unfortunately, I can't show you that. Because my screen isn't big enough, but if you have a really large screen you can test that out as well. So, I'm simply going to save these two media queries, go back into my browser, and let's look at the post format first. The one that has the block quotes, so I'm simply going to reload this page. And you'll see my block quotes is pulled out by 160 pixels and now you see why it's so powerful. This makes for a really cool layout and it also makes it easier to read the content. Because we're leaving more room for the content in saying this is a quote it's been pulled out of the content and it's over here on the left.
The same goes for images if I know reload my image alignment post. You'll see that my left aligned image is being pulled out. And yeah, it looks a little bit weird, because this image is a little small. But if it was a bigger image it would actually look really great. because it would span in. In fact, I can go here and change the mark up, so that you can see it. So I'll grab this image here that's currently set to align none. And I'll set it to align left instead and update and view the posts. And now, when I scroll down, you'll see that the image is aligned to the left and the text flows on the right hand side.
And now I hope you really see how powerful media queries are. And also how powerful dry development practices are. Because by making simple decisions about what classes we apply to things. And then, using media queries strategically, we can create really custom experiences without writing much code. That effect you just saw only requires these eight lines of code all together, to make it work. And if you're on a large screen and you can really expand the view here, you can see just how effective it is.
There are currently no FAQs about WordPress: Building Themes from Scratch Using Underscores.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.