Join Justin Putney for an in-depth discussion in this video Using media queries to adjust the layout, part of HTML5 Projects: Creating a Responsive Presentation.
Let's add some media queries to our CSS, to make sure that the display of the…presentation works well as the browser gets smaller, and reviewing this on…smaller devices. So in the chapter 4, 04 03, start folder,…I'm going to open the index.html file in the web browser.…This is largely a process of trial and error so, really what I'm doing here is,…looking at the browser, scaling it up and down, seeing where parts of the design…break down. So, the text looks reasonably good at a…large size but, as I start to scale down it gets a little bit big for the window.…
Use the arrow key to navigate to the next screen and you can see it even more in…this case because there's more text here. So what I want to do, is to get the value…of the width of the window, as I'm visually looking at it.…So I'm going to right click and choose, Inspect Element again and this time, I…want to Undock this panel, so I'm going to click this button down at the bottom left,…that way it won't affect the width of this window and I'm going to go to Sources in…
Discover how to structure the HTML and slide content; design the navigation to react to clicks, keyboard input, and swipe gestures; and use CSS to customize the slide display for different screens and animated transitions. Justin also includes a series of challenge-and-solution pairs to test your skills.
Then, when you're ready, watch the HTML5 Projects: Creating an Advanced Responsive Presentation follow-up course to enhance your web presentation slides with audio, video, and an automatic playback feature.
- Structuring an HTML5 slideshow
- Creating the default slide appearance
- Using jQuery to display the current page
- Adding swipe gestures for mobile
- Creating a pause screen
- Translating your ideas into CSS
- Using media queries to adjust the layout