r/Codecademy • 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 Upvotes

8 comments sorted by

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:

  1. Follow instructions - add col-md-offset-8 to your column.

  2. 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 :)

1

u/Krogg HTML/CSS Aug 22 '15

Thank you for the response. I wanted to make sure I was seeing it correctly or maybe a line of code was producing the results and I just didn't understand.

The tone of the text seems to imply that nothing gets done about the bugs reported?

1

u/factoradic Moderator Aug 22 '15

Well, they obviously doesn't share our excitation about bugs :)

There are still some bugs which were reported two years ago. In last two months I reported few bugs in AngularJS and Ruby on Rails courses, none of them got fixed. This bug is not crucial, this is just a preview site and it does not frustrate many users (this is first question about it in this subreddit), so it's probably a very low priority bug.

I have no idea how this looks from their side, but it's still good to report bugs. To be fair I have to say that now they create new content, so I can understand that they are busy.

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.