- Figure 3 17 Shown Below Shows The Finished Fixed Fluid Hybrid Layout But Notice A Few Areas For Improvement There Is 1 (185.72 KiB) Viewed 67 times
Figure 3.17 (shown below) shows the finished fixed/fluid hybrid layout, but notice a few areas for improvement. There isn't any space around the text in the right-side column, there aren't any margins between the body text and either column, the footer strip is a little sparse, and so on. Take some time to fix these design elements Using the code you fixed in the preceding exercise, try to make it responsive, using only the brief information you learned in this chapter. Just converting container elements to relative sizes should go a long way toward making the template viewable on your smartphone or other small device, but a media query and alternative style sheet certainly wouldn't hurt, either. NOTE: the source code for this webpage is in this chapter's github repo from chapter 3 X Sample Layout
http://www.yourdomain.com/layout.html ACME Widgets LLC Welcome to ACME Widgets! Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam tincidunt posuere malesuada. Suspendisse ac felis ac ante tincidunt ullamcorper. Nulla vitae ligula vitae mi rhoncus adipiscing. Etiam congue felis id ante semper at imperdiet massa tempor. Nullam hendrerit fermentum ligula, sit amet pellentesque purus faucibus in Sed molestie lacus mauris, ultrices accumsan sem. Phasellus facilisis malesuada sem, nec ornare ipsum dictum consectetur. Nulla libero nisl, consectetur eget accumsan vel, interdum vitae enim vitae nulla feugiat dignissim ut sit amet odio. Nunc non enim id sem faucibus congue. Integer ac mi in justo euismod sodales. Aenean imperdiet vestibulum auctor. Sed ullamcorper congue ipsum, eget vulputate sem scelerisque in. Donec ornare vestibulum ongue. Etiam sapien nulla, rutrum mattis mattis ut, pellentesque eget augue. Proin nisl mauris, suscipit quis elementum ac, vestibulum quis lacus. Ut eget justo vitae urna varius sodales. Copyright information usually goes here in the footer. Mission History Executive Team Contact Us ||| SPECIAL WIDGET DEAL! Buy three widgets and get a fourth for free. Act now!