Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
The typography and layout of my single post template is almost in place. The only thing that's missing is this post meta element which is shifted to the right and displaying a little funny. So what we need to do here is first fix it and then make it responsive. So first, you notice that it's shifted to the right, and there's not enough space underneath. And if we look at the markup, you can see why this is happening. If I click on the entry-meta element, you'll see it's being affected by this style here. And then if I go ahead and click on the entry-header element, you'll see it's affected by the same style.
And this is a remnant from earlier in the course. We've moved the entry-meta element, so that it's within the entry-header. So now we need to remove the entry-meta as another element within the style, because otherwise, we're styling the same element twice and that's why we get this shifting thing happening. So, I'm going to go into layouts and content-sidebar, and here I'm going to find where both entry-header and entry-meta have been mentioned in the same rule, and I'm going to take out entry-meta. It happens twice. Once here, and once inside a media query.
Right here, so I'll just take that out, and save content-sidebar. And now when I reload the page, you'll see that entry-meta aligns properly and we also get more space underneath. And now it's time to get entry-meta to match our design. Because if you remember, the design has entry-meta floating to the left when the screen is big enough. This is an important design element within the site as a whole. When there's enough space on the screen, I shift content both to the left and to the right to utilize all the space, so that it's easier to consume the content on the page.
So what we need to do now, is shift the entry-meta out when the screen is wide enough. And I've done some math and figured that the screen is wide enough to contain both the main content and the sidebar and this entry-meta element when it's 1320 pixels or wider. So we're going to make a media query that targets that situation. And within that media query we need to shift the content. So first that we're going to look at my design and find out exactly what I'm going to do. The entry-meta content is going to be shifted to the left and the total width we can work with is a120 pixels.
I also want to shift the content exactly 40 pixels to the left. And all this can be done with CSS. So if you go to the code-snippets, for this movie, you'll see at the top here we have a media query. So I'll copy it out, and since this is a general style, I'm going to close content-sidebar and instead open style.css. And find where I placed my meta styles. So I'll go Find meta. Here we have the meta content, and I'll just scroll to the bottom of this content here, and paste my media query in below.
So what we're doing here is saying on screens that are wider than 1320 pixels we want to target a single post, and the entry-meta within that single post. We're going to set the entry-meta box to 120 pixels wide. We'll float it to the left, and then we'll put a margin left of minus 160 pixels. So that is 120 plus 40. So that will shift the box away from our content, enough, that we get 120 pixels of room for the actual content, plus a 40 pixel margin.
Finally, I'll align the text to the right, so that it aligns to the right. And I'll set the byline and the posted-on within the entry-meta to block elements and give them a bottom margin of 1m. So, I'll save this and then we can go and test it in the browser and you can see exactly what happens. So what happens is we'll build a box around the entry-meta. And that box is then floated to the left and then shifted a 160 pixels farther to the left, which gives us a 40 pixel margin here, and the entire box is of total size of a 120 pixels.
Now the block elements that I created, is this one. Byline which contains written by and the name of the author, and then posted-on which is the dates. So now we get some space between them and we get a layout that matches our design exactly. So now we have the responsive version, but what happens when I reduce the size of my window? You'll see when I go below 1320 pixels, the text slots up where it supposed to, but it still looks funny because now it says written by themedemos.
And then there's no space and then January, and then there's nothing and then leave a comment. What I want for it to say is, written by themedemos on January 11, 2013 period leave a comment. So here I'm going to use the same technique we used to add these icons. And I'm going to get the browser to hallucinate and think that the word on is placed in front of January and the period is placed after, only on screens that are smaller. So we'll use CSS pseudo elements to make that happen.
If you go back to the code snippets, here you have another media query. So I'll copy that one out and paste it in directly below. And this media query targets any screen that's smaller than 1320 pixels and what it does is, it finds the posted-on elements, that will be the date. And then it says before the posted-on element put in this extra content. Space, on, and then another space, and then after the posted-on element, put in a period.
Save that, reload the page in the smaller screen, and magic happens. Now you see the browser injects a space, and an on, and another space before the dates, and also a period after. And you know that it's been injected because, if you try to highlight this. You'll see that the highlight doesn't affect the word on and the period, because these aren't actual elements. They're not in the markup anywhere. They've been injected using CSS. So this is a very simple way of making responsive text that looks correct, but when we scale up again, it disappears, so it doesn't clutter the overall design on wider screens.
And there you have it. With two simple media queries and some carefully planned styling, we get a highly responsive layout that utilizes the space on the screen in a clean way.
Get unlimited access to all courses for just $25/month.Become a member
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.
Your file was successfully uploaded.