Join Chris Converse for an in-depth discussion in this video Creating a CSS media query for small screens, part of Creating an Interactive Animated Timeline with jQuery.
Now to detect small-screen devices, we're going to add an inline media query.…So, in the timeline.css file, let's scroll down to the bottom.…Let's hit a few returns. Let's start by typing in @media space…screen and, then in parenthesis, we'll put max-width:colon 500 pixels ,so 500px and…the parentheses, and then a beginning and ending bracket.…So, any rules that we put inside these brackets are now only going to be invoked…if the screen size is less than or equal to 500 pixels.…
So, let's come in here and open up those brackets.…Now, the first rule we're going to create is going to be targeting the timeline container.…So, .timeline then beginning bracket, lets change the margins to zero.…The background, lets set the color to 81194C.…Then we'll specify a URL, we're going to change the background image.…Dot dot slash to go out to root, images slash background_small.jpg, set no repeat.…
We're going to center the graphic on the X and zero pixels for the Y.…So, now when we're in a small-screen device, we're going to change out the…
- Preparing the artwork
- Setting up the project files
- Creating the HTML containers
- Adding content into the HTML containers
- Styling the timeline with CSS
- Adding jQuery to your project
- Adjusting the layout with jQuery
- Adding navigation elements
- Animating the content based on navigation
- Adding autostart and screen size detection features
Skill Level Intermediate
1. Creating the Web Graphics and HTML Content
Adding content to the HTML3m 15s
2. Adding CSS Styles for Layout and Positioning
3. Finalizing Layout and Animating Panels with jQuery
Animating the background4m 24s
4. Making the Design Responsive
5. Adding an Autostart and Screen Size Detection
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.Cancel
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.