Join Chris Converse for an in-depth discussion in this video Loading alternative content based on screen size, part of Creating a Responsive Web Experience.
Now at this point in our project, we're…only loading in the large screen content HTML file.…So even when we close the browser down to the…medium screen size, we're still looking at the large screen content.…And when we bring the browser down to the…mobile size, we're still seeing that large image inside.…We turned off the caption with CSS, but we're still seeing that large graphic.…So now what we're going to do is, change the content up here.…We're either going to load large screen content when the screen is in a large…state, medium screen content based on a completely separate HTML…file, or we're going to clear out this content for small screens.…
To do this, let's go back to our design.js file.…Let's come down inside of the loadHero function.…going to add a few returns here to give myself some room.…So, what we want to do inside of loadHero is detect the window size.…So, let's hit a few returns inside of loadHero.…Start with another…conditional statement. So, if, parentheses, brackets.…Split that open.…
- Modifying the graphics
- Adjusting the CSS for the navigation
- Loading content with jQuery
- Loading alternate content based on screen size
- Animating the hero panel
- Maintaining support for Internet Explorer 7 and 8
Skill Level Advanced
Q: I don’t see the original course in which this course is based. Where is the final project to the previous course?
A: The exercise files, both premium and free versions, now contain a copy of the previous course’s final project.