Looking for feedback and help with my Tribute Page

Looking for feedback and help with my Tribute Page
0

#1

Hi everyone!

http://codepen.io/mundhus/pen/YpjJxx

I’ve just finished my Tribute Page assignment. Well, not exactly finished, because it lacks content here and there (sorry for that Lorem Ipsum, editing bio of a person like Nikola Tesla is really hard when English is not your native language) and graphics for the rest of the inventions (I’m a newbie in Adobe Illustrator) but generally speaking, it’s done. I’d like to hear some feedback from you along with help to resolve some issues.

  1. The page is “responsive”, it scales well for mobile (in fact, it’s “mobile-first” as Bootstrap suggests) and desktops, but on tablets it’s a bit clunky when it comes to images. There are 4 sizes of columns and I nested in order to scale images nicely with “img-responsive” class and it works for mobile, desktop and partially for tablets. 576px-768px causes the problem, it scales fonts etc. well but it’s still in col-xs-* and so images are a little bit too big. Where is the mistake? Should i approach scaling images some other way? Make less breakpoints?
  2. Can’t really tell why that happens, but i have that strange white stripe on the right site of the page - you have to scroll right to see this. It’s propably has to do something with that “absolutely barbaric” way of colouring the page by simply adding color-background to “row” class.
    Thanks for all the feedback and help!

#2

I think it’s because your footer is wider than the viewport. When I delete the footer, problem solved.


#3

I found an extra </div> that prematurely closed one of your container-fluid elements - your HTML line 146.

Speaking of which, you only need 1 <div class="container-fluid"> at the top. It can contain all your rows.


#4

Nice going so far :slight_smile:

The focus is on learning to code for front end and showing what you know. The challenge only calls for text. So Lorem ipsum or some open licensed text from say Wikipedia are nothing to apologize for–especially if this spares you a distracting effort and lets you focus on the requirements.