r/Codecademy • u/Krogg HTML/CSS • Aug 22 '15
Best Bite #2 incorrect code used in actual design?
I am working through the BestBite website and I noticed that the redesign page's code does not line up with the instructions on the objective.
In #2 it says: "Add a background image to the jumbotron. The one we used is here. Then add a heading that says "Browse. Create. Share.", and use margins and Bootstrap's offset columns to achieve the alignment shown in the design."
use margins and Bootstrap's offset columns to achieve the alignment shown in the design.
When going to the site listed you are given offsetting columns and how to move them over.
However, none of the code used in the offsetting is used in the actual design. When you open the actual design (using chrome) right click on the "Browse. Create. Share" section and choose "Inspect Element" (might be different option for other browsers).
Notice how the code looks like the following:
<div class="col-md-4">
<h2>Browse.</h2>
<h2>Create.</h2>
<h2>Share.></h2>
</div>
If we used the bootstrap offsetting columns code like it says we should, the code would look something like:
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
</div>
What gives? It looks more like the design has the code aligned to the right of a column, but the code doesn't use the offset.
1
u/noonesperfect16 Aug 22 '15
I am on the same one, actually. I got hung up on offsetting them last night for an hour before I decided to move onto the next part of that project and come back to it later. I have gotten them fairly close, but not quite where I need them to be yet. Will update you if I manage to figure it out, if you haven't yet.
2
u/Krogg HTML/CSS Aug 22 '15
I was unable to figure it out with the bootstrap method, so I used the text-align method. It got the job done, but I would really be interested to see what the final product looks like to get it done with bootstrap.
1
u/noonesperfect16 Aug 22 '15
I actually just did the same thing shortly after posting last time =/ I agree that if someone has the bootstrap coding correct and can link it to try out/play with, I would appreciate it.
1
u/siingleton Aug 25 '15
I can't seem to use the boostrap method neither, and I see little point in achieving the result through another method - I want to learn.
I've made a separate thread specifically for help in correcting my bootstrap code: https://redd.it/3ibgmv
1
u/factoradic Moderator Aug 25 '15
I do not understand what do you mean by bootstrap method. They forgot to add a offset class to column in their preview site. You want to align text? Use
text-align. You want to add offset to your column? Use bootstrap class.
1
u/factoradic Moderator Aug 22 '15 edited Aug 22 '15
Yes, result page is not consistent with instructions, and we can assign exactly the same problem to few other projects.
Two solutions:
Follow instructions - add
col-md-offset-8to your column.Reproduce result page - use column without any offset.
Problem solved.
And now you should report this bug (bottom left corner), maybe they will fix this someday :)