Join Joseph Lowery for an in-depth discussion in this video Restructuring the layout, part of Building Mobile Sites with Dreamweaver and WordPress.
The layout is probably among the most obvious elements of a Web page that need to…be modified for tablets, especially if your Desktop design is a fairly large…scale, like this example.…In this movie, we will change just a few key things, but they'll make a ton of difference.…So we are going to start from the outside, and work our way in.…One of the common techniques for working with a Tablet CSS stylesheet is to go…to the stylesheet that is currently being used, locate the rule that you're…working with -- in this case, it's outerWrapper -- there it is, and I will copy that…and then head on over to my style_ tablet.css. Let's replace the temporary…placeholder outerWrapper with the copied one,…and now I am going to make some changes here. We don't need to modify the margin.…
We do need to change the max-width, and I'm going to make that quite a bit…smaller, so that it fits into the tablet better at 36.75ems.…I don't need to modify anything else here, but I am going to add a bit of…margin, top and bottom.…
- 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.