Join Chris Converse for an in-depth discussion in this video Positioning the image and caption, part of Creating a Responsive Web Experience.
Now that we have the HTML dynamically loading into our index.html file…inside the heading area, we need to style this content at the top.…So, let's come back to our screen layout large.css file in our text editor.…Let's come down and find the header element and…then the anchor tag with the class of logo.…Let's come in here and let's find the right position property.…Let's change that to left so we're going to have top 28…left 30 pixels. Let's scroll down.…After the media query where we're redefining the padding and the footer.…
Let's hit a few returns and now we're…going to add in some rules that are going to target…the hero id and start styling the hero HTML…that was loaded in from the external HTML file.…So the first rule, we're going to target the hero container.…So just pound hero.…We're going to set a property of height to…275 pixels. We're going to set position to relative.…And then we're going to set the overflow to hidden.…Next rule, we're going to target the panels inside of hero.…So pound hero space.panel, we are going to set a width of 100%,…
- 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.