Class 11 Notes

 

Topics

  • Cool Careers Speaker Forum
  • Media Queries
  • Homework for next week

Cool Careers Speaker Forum

Our class will be meeting in AET 235 for this special presentation

Thursday, November 8, 2012

6:45pm – 9:00pm in AET 235 – Students and faculty invited.

The speakers will be Chris Do, founder and Creative Director of Blind, a studio in Santa Monica with an emphasis on motion graphics, and Fabian Geyrhalter, principal of Geyrhalter & Company, a branding and graphic design agency in Santa Monica.

These professionals will discuss what they love about their work, what they don’t like, and the challenges they face.

2012 Showcase Reel for Blind

Assignment – Media Queries

1. Watch the two videos below.

The first is about the basics of media queries. The second video is a quick walk-through of creating some simple media queries using the prototype from the midterm project.

2. Make a copy of your midterm project prototype and add several media queries.

Make your midterm project prototype responsive. Use the following breakpoints: 1000px, 700px and 480px. It’s smart to start looking at the CSS and the media queries for responsive sites you’ve studied.

Place in the <head> of the HTML file

 <meta name="viewport" content="initial-scale=1.0, width=device-width" />

CSS: from Media Query Walkthrough Video

@media screen and (max-width: 768px) {

#wrapper {
width:100%;
}

}

@media screen and (max-width: 520px) {

nav ul {
width:100%;	
padding: 0;	
text-align:center;
border-bottom: 1px solid #ccc;
}

nav ul li {
float: left;
width: 25%;
}

li#nav4,
li#nav8 {
clear: right;
float: right;
}

nav ul li a {
width: 95%;
border-right: 1px solid #ccc;
border-top: 1px solid #ccc;
}

nav ul li a:hover {
}

#logo {	
background-color: #808080;
width:100%;
height: 44px;
}

#content {
width:100%;
float:none;
padding: 0;
background-color: #FFF;
}

.slideshow {
padding-top: 10px;
}

#rightcol {
width:100%;
float:none;
}

footer {	
background-color: #808080;
width:100%;
height: 44px;
}

}

 

Introduction to Media Queries


 

Media Query Walkthrough

Leave a Comment