Exercise 12.06: Responsive Layout


The goal of this exer­cise is to tai­lor design solu­tions to the appro­pri­ate media con­ven­tions and the widest range of deliv­ery devices.


The objec­tive of this exer­cise is to use a sin­gle con­tent file, mul­ti­ple style sheets and CSS prin­ci­ples to pro­gres­sively enhance the user experience.



Using media queries sup­plied with the CSS and HTML of Boot­strap, refor­mat the sup­plied con­tent to fit mul­ti­ple screen sizes. Use the pro­vided con­tent, along with @media CSS to develop appro­pri­ate design spec­i­fi­ca­tions for each of the com­mon screen res­o­lu­tions and sizes. Use each dif­fer­ent device and/or case use as a start­ing point.

Part One

Cre­ate and link a new style sheet called mediaqueries.css. Use the sup­plied code to Change back­ground color of each break­point to pro­vide evi­dence of a change of state when the view­port changes. Take a screen shot of each and sub­mit to the dropbox.

body {
.container {

/*Extra small devices (portrait phones, less than 576px)
No media query for `xs` since this is the default in Bootstrap

Small devices (landscape phones, 576px and up)*/
@media (min-width: 576px) {

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {

Sample Layout

Simple three column webpage layout using Bootstrap.
Sam­ple image of fin­ished gen­eral lay­out. Spe­cific may be slightly different.


  • The fol­low­ing rubric posted on D2L will deter­mine exer­cise score: Exer­cise Grading


Mark up, tags, val­ida­tor, break­points, link­ing, media queries


com­puter, web browser, Dreamweaver, content


As defined by cor­re­spond­ing cal­en­dar item, drop­box, dis­cus­sion or con­tent topic description.