Join Joseph Lowery for an in-depth discussion in this video Restyling content, part of Building Mobile Sites with Dreamweaver and WordPress.
You may be tempted to just leave the content styles the same for both Desktop…and Tablet, but before you do, take a close look at the readability and size…appropriateness for both platforms.…Personally, I tend to go a little big with my font sizes on the Desktop which I…inevitably have to consider scaling back for tablets.…Let's look at our example site, and see what's warranted.…So here we can see the main heading.…If I click onto that, we can see it's an h2; that's pretty sizable.…
And as I scroll down, it looks like there's some additional padding here,…obviously there is a line height consideration here that my clear up if we…reduce the size of the type.…Alright, so it looks like there are just two things to me. I would first…change the h2, and then, I think this might be padding. Let's turn on Inspect,…and yup, it sure is. So when I hover over the paragraph there, the purple area…you see around is padding.…An easy mnemonic is, padding is purple.…
Okay, so let's make a change in the style _tablet.css. So, let's reduce our h2 tag;…
- Setting up an existing WordPress site
- Targeting configurable site elements
- Setting up media queries
- Preparing for adaptive images
- Styling a blog for tablets
- Restructuring navigation for different-sized displays
- Developing a WordPress site for phones
Skill Level Intermediate
Dreamweaver and WordPress: Core Conceptswith Joseph Lowery5h 44m Intermediate
WordPress Themes: Photography Portfolioswith Morten Rand-Hendriksen53m 2s Intermediate
1. Preparing Your Site to Go Mobile
Understanding media queries3m 50s
2. Retrofitting for Multiple Screens
3. Implementing a Full Mobile Redesign Strategy
4. Styling a Blog for Tablets
5. Developing a WordPress Site for Phones
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.