Join Joseph Lowery for an in-depth discussion in this video Making blog content more accessible, part of Building Mobile Sites with Dreamweaver and WordPress.
Our final task in creating the mobile phone stylesheet is to bring the…content into proper shape.…We will have to work with both structural elements, and content related tags as well.…Let's get started.…So again, I note that I have a contentWrap rule that I need to set the margin to zero.…Let's go ahead and do that. I'll open up style_phone.css, and let's move to…the bottom, and we'll put it in a contentWrap, and make that margin zero; close the rule.…
By now you remember that there are two main areas: content, and the widget-area,…which is the sidebar.…I am going to set both of those to a width of 100, and get rid of the float…that's on the content selector.…So let's start with content, and set that width to 100%, and the float to none.…We'll also set the width for the widget-area to a 100%.…Let me save my file, and then toggle Live View on and off, and we'll take a look…at where we are at right now.…
Well, it looks like everything is lining up pretty well, from content, down to…sidebar, and back up again.…
- 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.