Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
So far, we've added a new feature at the top of our index page that shows a featured image and a welcome message. Now we need to realign this so it looks little bit better. I mentioned before that I want that featured image to float on the right and then have a text on the left so it takes up less space of the top here. To do that, I need to apply some CSS so that I can align these elements. But I don't like to add extra code unless I absolutely have to, and I have a feeling that this theme, the twentytwelve theme, might already have the layout styles I need. I just need to apply those styles rather than writing my own.
So I'm going to do some experimentation here. I know there's a page template in twentytwelve that's called Front Page and have a feeling that page may have the layout I need. So I am going to apply that one to the page that this content is coming from so I see if it floats the image the way I want it to. So I'll go back to my Dashboard, under Pages,. Then I'll find Front Page. I am just going to do a Quick Edit here. And I'll change the Template from Default Template to Front Page Template. Now I am going to view to Front Page.
I know this is getting a little confusing, because this is the page that has the name Front Page, so it's not actually the front page of the site. And I have applied the Front Page Template meant to be on a Front Page, but currently not on the Front Page, to the page called Front Page. What matters here is that you can now see that the layout is the layout I want. I have image on the right and I have text on the left, which means the work has already been done, and all I need to do is make my Front Page, the welcome.php file, call in the same styles.
So I am going to use my Developer tools here. I'll right-click on the image and click Inspect Elements to see what's going on. And Here I very quickly see that the div that contains the image has a class "entry-page-image". So if I go and copy this class, jump to my Front Page or the Index Page, scroll down, find the image, inspect the element, and then simply apply that class to the "figure" so now it says just figure class entry-page-image, the image magically shifts over to the right just like I want it to.
So I don't need to write any style code here. All I need to do is apply a class to the existing code. I'll go into my child theme, open welcome.php, find my figure, and just paste in class "entry-page-image". And I am going to put in a comment here now. I'll save this, turn off my Developer tools, and reload the Index Page. The text is on the left and the image is on the right, but I am not quite done yet.
First of all, I want to separate the welcome message from the rest of the content by making more space and also adding a line here, so it's clear that these two things don't go together. But more importantly, the twentytwelve theme is fully responsive. By responsive I mean the theme reorganizes and reshapes to fit with whatever size screen you are using. So if someone is using a cell phone, they have a smaller screen and the content reorganizes so you don't have to scroll left and right to read things. You can see what I'm talking about if you resize your window.
You see here that as I resize the window, the content shifts around. But it looks really weird up here because currently everything is kind of jammed together. So I need to add some style to make sure that there is space here and everything is aligned properly. To save you some time, I have already created all the styles necessary and put them in the code snippets for this movie. So if you go up to your code snippets, under movie 7.4, you find all the styles necessary. So I'll start by copying this batch of styles here, go to my style.css file in my child theme, and just paste that in.
I'm doing several different things. First I am adding a border to the bottom, and I am also making some space so that that welcome message is spaced separate from the rest of the content. Then I am taking the text and floating it to the left and giving it the same amount of space as the image has on the right. And then I'm giving some extra space for the intro text paragraph, so that there's a nice breathing space between the image and the text. I'll save my new style.css file and reload the page in my browser, and you'll see now things align much better.
So when I resize this, you see there is nice breathing space between the text and image. However, I am not quite done, because if I take this down even more, you will see the image pops at the top, but the text keeps squishing in, because we are still telling the browser that this text should take up 49.7% of the space. To fix this I need to use a media query. A media query basically asks the browser how big is the window currently, and then if the window is of a current size, it uses a different style.
If you go back to your code snippets, you'll see here it's a very small media query just to fix that problem with the text. So I'll paste that in at the very bottom of my style sheet, and you can see that what it says is if the screen has a max width of 600 pixels--means it's smaller than 600 pixels--set the intro element floats to none and the width to 100%. If you look up here, you'll see that currently the intro element is set to left and the width is 47.9%.
If I save that and reload my skinny browser, you'll see that the text now flows over all the page, but if I scale it up, it pops over and only takes up 47.9%. So now, we have a welcome message with the featured image on the right, a line that separates the welcome message from the rest of the content, and things are really starting to look good. You also got a sneak preview of how to build a responsive WordPress theme.
If you want to know more about how to build responsive WordPress themes, you should go and check out my other course in the lynda.com library called WordPress: Building Responsive Themes.
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.