From the course: Creating a Responsive Web Experience

Unlock this course with a free trial

Join today to access over 22,600 courses taught by industry experts.

Loading alternative content based on screen size

Loading alternative content based on screen size

From the course: Creating a Responsive Web Experience

Start my 1-month free trial Buy for my team

Loading alternative content based on screen size

“

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…

Contents