Second background image in Innovation Cloud project


#1

Continuing the discussion from Innovation cloud, Im kind of stuck between S4 and S5:

I'm also having a problem. My second background image isn't "full width."

Here is my Code Pen:

Any idea how I can make the second background image 100% width?


#2

Hey Sean,

You need to move your <div class="jumbotron"> out of your <div class="main">, and I think you should add a <div class="container"> inside your jumbotron <div>, that encompasses everything inside it.

The reason your background image isn't the full page width is because the jumbotron is inside .main, inside a container. Bootstrap (which is the CSS framework we use in these projects) makes containers be a certain percentage of the page width by default, and jumbotrons are the full page width. The problem is, since the jumbotron is inside a container, it's only the full width of the container, not the page.
So that's why you need to separate them. But also because separating different parts of the site just makes sense :slightly_smiling:

I forked your Pen so you can see how I got it to show up full width:


#3

Thanks!

That makes perfect sense and when looking at the outcome I figured it was something like that, but the instructions say "in the main section add...."

http://d.pr/i/1lyzS

Do the instructions need to be changed?

Thanks again!
Cheers!


#4

Apparently so! Thanks for catching that :slightly_smiling:
Could you report it to an Advisor? They should be able to fix the problem in the instructions.