This lesson is the final of 4 lessons that modify inner.html so it will work as a responsive design for mobile devices with smaller screen sizes
We will fine tune the navigation bar for mobile devices, centering the text and adding borders surrounding the hyperlinks to help differentiate them
We also change the media queries themselves to better accommodate the in-between sizes for devices
In the max-width of 450px media query on styles-inner.css
Add a selector of li with the following properties:
Preview in the browser
Delete the min-width: 650px media query
Change the width on our smaller screen size media query from 450px to 700px in the @media panel
Preview in the browsers and change the width of the browser
The web page is now using 2 media queries that modify the CSS rules on the page based on the screen size of the device
The web page shows one page layout for devices up to 700px wide, and a different page layout for screen sizes 701px or larger
Media Queries for Responsive Design
Lecture Slides are screen-captured images of important points in the lecture. Students can download and print out these lecture slide images to do practice problems as well as take notes while watching the lecture.
Educator.com recommends Adobe Dreamweaver CC to use with our Dreamweaver CC course. Adobe Dreamweaver CC is the leading all-in-one visual development tool used by web designers and developers worldwide to create, publish, and manage their websites and mobile content. Membership includes the full version of Dreamweaver CC to download, install, and run on your computer. You will get immediate access to all the latest updates and new features as soon as they're released.