Join Joseph Lowery for an in-depth discussion in this video Customizing for tablets, part of Dreamweaver CS6 and WordPress 3.8 Essential Training.
In this lesson, I'll show you how to retrofit a desktop design for a tablet-sized screen. Specifically, one that is between 321 pixels and 768 pixels wide. Let me show you what we're going for with the blog com. So, I'll switch to the tablet size. From my three resizing icons here. And as you can see, the navigation and main content area have been tightened up a tad while the sidebar stays the same width.
This is obviously a design choice. You may opt to reduce both the main content and the sidebar proportionally. And even more obviously, there are significant changes to the footer. Now, instead of copying the values from the blog comp and changing the selectors where appropriate. Let's just work our way down the page in our WordPress blog, adding styles to the tablet media query we establish in the Setting Up Media Queries lesson earlier in the chapter. For that, I'll switch to my index.php.
From the blog folder, go into live view as I have here. Discover my related files and then set the custom filter to style.css. Now, let's use Dreamweaver's window sizing capabilities to work within the targeted width. So I'll go ahead and click that tablet size and as you can see, there's a little bit of space on either side that I have to scroll to, and we should be able to get rid of that by the time we're done. So into style.css we go and I'm going to scroll down towards the bottom, where we have our media queries.
And as I said we're working in the tablet view first, so that will be the at media statement starting on line 294. So first, let's reduce the overall width of the page and the main container. Now the overall width of the page is, of course, controlled by body, and the main container, you'll remember, is outer wrapper. And I'm going to set that width to our max, 768 pixels. And put a semicolon there to end. Now if I take a look at the page that we see here. Let me hit Refresh.
And we still have things pushing out to the edge. At the top of the page, our navigation is. So that's my next target. And back to split view. The navigation is pushing out past our tablet size. So, let's reign that in a bit. First, I want to reduce the right margin to work in a tighter area. So, this is contained in the page header. And we're targeting the list items, LI. And we're going to change the margin right, as I said, to a lower value, 25 pixels.
Next, let's reduce the width of the brown navigation area that sits behind the list items, and this is also a page header class, except it's targeting the nav tag, and we'll set the width to 600 pixels. Okay. Let's save that and let me take a look at that in design view. Oh, not bad. I think it's fitting pretty nicely in there. Okay. Let's head back. Next up, I'm going to need to adjust the background image that creates the faux columns that you see here separating the main content from the side bar.
And as I said, I'm going to reduce the main content area and keep the side bar the same. The full width for the entire page is 960 pixels. And my reduced width is 768. So the difference is 192, 960 minus 768. And what that means is I need to shift the background image to the left, 192 pixels. Let's go to the style sheet for that. This image is set in the content wrap selector, so let's enter that.
Content wrap. And put in background position. And set that to a negative 192 px top. Whenever you change the background position, you need to put both the horizontal and the vertical arguments, and I'm also going to need to give the container a new width, which is our max width 768 px. Now let's apply that same measurement difference, 192 pixels to the width of the main content area.
Which is controlled by the content selector. So I'll put in content, create my rule, so I'll enter the width property and then my value, and my value will be derived from the current width, which I previously discovered was 607 pixels, and I'll subtract 192 from that, and get 415, which will be our new width for tablet-sized screens for the content area. Alright. I'm going to save my style sheet and then Refresh the page.
Take a look and see how we're doing. Okay, things are looking quite a bit better. Now, the H1 tag, Roux Academy Blog does look, oh, a tad overwhelming now. So let's take that down from its current size of 2.8em. As you can see over at the Properties Pane, to 2.4. 'Kay, back to our style sheet, content h1 and the font size property 2.4em.
Much better. Now if we scroll down the page and just close your eyes to that protruding video for a moment, and let's tackle the footer area next. The 3 column arrangement just isn't working anymore. There's a lot of variations you can apply to this area, but let's take a simple, one-column-centered approach. So back in style.css let's target footer.col.
That's for the columns. And turn off the float. So float: none. Get rid of the border on the right that you see in between the first two columns. border-right: none; and then do our centering by setting margin to 0 auto. Okay, we'll save that. And then take a peak over here. Much more readable. I see down at the bottom, it looks like we've got a little bit of padding necessary between the links section and the final copyright line. So I'll go in and add a new rule. Footer P.
And let's put a padding-top value there of 20 pixels, and see if that does the trick. It does. The paragraph the p is what's the holding the footer here. Now typically, at this point I'd say, good job, and offer high-fives all around or something, but we've got, back up in the middle of the page, is big gorilla video sitting right there. The comp didn't account for handling video responsibly. So, it's kind of good that it came up now rather than when the client first uses the site.
Let me show you how to make a video resize as needed in a responsive web design. It's going to take a couple of CSS rules and some judiciously-placed HTML. And since we're here, let's do the CSS first. We're going to need to create an initial rule for a containing element that maintains the proper padding and handles overflow correctly. So back to split view. And were going to go up above both of our media queries, because this is something we are going to want to have in place for every screen.
So I am going to give this a comment first and call it responsive video and we'll create a new class called video-container. And within it we'll put our rules. The first of which is going to be position relative. Because video-container is a containing element, and within that we'll be absolutely positioning our content. So, position: relative. And we also need to add some padding on the top and the bottom. Now the bottom, we're going to set it up as a percentage value.
And the top we'll set to a specific value. And padding-bottom, we'll make 56.25%. Now that's an odd value, you say. Well, it's one that's been worked out on the web by a number of people and it seems to be very effective. So now let's put in that specific value up top, padding-top and I'm going to set that to 30 pixels. Now, initially we're going to set the height to 0, and that will allow whatever is in the containing element to determine the height, so height 0.
And for this to work correctly, we're going to have to set overflow to hidden. Okay, that's the end of our video-container rule. We'll need one more rule to target what's within the container. Now when Wordpress embeds video, it typically uses an iframe. But,it could also use an object or embed tag. So let's make sure we cover all our bases. So, I'll put in our wrapper class first video-container and then the tag iframe.
video-container object and finally video-container embed. Open and close curly brace. And this is going to have an absolute position, as I mentioned. In the upper left corner of the container, so, top will be 0 and left will be 0. And then, in order for it to expand correctly, we'll set both width and height to 100%.
I'll save my page here, because next in order to take advantage of these CSS rules, we have to add a bit of HTML to our post that contains the video. So let's go back to the WordPress dashboard and find that post. Video Production Project Online. One we're there, we'll go into the text tab, also known as the code tab. And there you see, on the second line, the YouTube URL that WordPress automatically interprets as an inline video. We need to make sure that the URL stays on its own line.
So, we're going to add surrounding code on separate lines above and below it. So, this will be a div with a class equal to video-container. And then below that, I'll close off the div. Now it's vital that you have blank lines on either side of the URL, otherwise WordPress will just output a link rather than the embedded video. So let's update the post. And then check it out in Dreamweaver. Alright I'm going to go into design view and click Refresh and there's our resized video.
Now if I switch to desktop width, it resizes again. The best thing is that this video we're scaling will also work for the phone-size screens, which we'll tackle next.
- Setting up WordPress locally
- Establishing your Dreamweaver CS6 site
- Adding and editing posts and pages
- Customizing WordPress themes
- Building responsive layouts
- Extending WordPress editable pages
- Using and styling WordPress plugins
- Integrating Spry functionality
- Publishing your WordPress site with Dreamweaver
- Personalizing and enhancing WordPress
Skill Level Intermediate
Author update on April 4, 2014:
WordPress 3.8.2 is now available from wordpress.org. The update focuses on security issues and should not impact this course in any way. A much bigger release, 3.9, is currently a release candidate and will likely go live later in April. I'm currently evaluating what impact v3.9 will have on this course.