Hi Everyone,
Here is my tribute page. I spent some time making sure the CSS was just right and I ended up learning a lot through my research.
If you have any recommendations or tips, let me know!
1 Like
looks good, I like the colours and code look clean, but if i shrink the window size it breaks. The image stays the same size so goes off the page and the bullet list becomes unreadable.
Thanks for the help! I just realized I should have used the bootstrap columns to keep everything organized and less CSS so that when you shrink the window, the page is responsive. I am currently working on that 
I have just improved it and completed my tribute page! I realize I could spend some time learning some Jquery and JS and add onto it, but I haven’t progressed that far. Maybe I will come back to it later when I progress further in the course.
So far, I have done the following:
- Taken FCC up until the tribute page
- Enhanced my understanding of CSS and HTML through codecademy
- Started work on my tribute page
- Realized I made a mistake and didn’t set it up to be responsive
- Came back to FCC to brush up on bootsrap again
- Redid my tribute page the correct way in order to make it responsive
- Feel satisfied, for now!
As always, any constructive criticism is always welcomed
1 Like
Hi Joe, I liked the page but may I suggest you something?
In the section “Significant Events in Ronaldo’s Life”, the content seems to be taking a lot too much of space. I tried putting the class “fourthrow” inside a div with class container and it seems to be looking much prettier that way. Good luck
Could you please explain further? I just saved it after making a revision, I noticed that not all my code is wrapped in a container so I was attempting to do that, but in the process screwed up my list.
No my list won’t be centered. I know I can add margin-left but that will look weird when you resize the window.
I think I just need to improve my container code and it’ll work?
I just went through your pen. You’ve added a div to wrap your div with id “fourthrow”. Now this div has a class “container2” and that’s what’s causing you trouble. Try replacing it with “container”
All the best 
I just forked the code. Check it out
I was able to fix it, however, I can’t get my footer to be full-width now 
Any idea what could be wrong? Are all my divs correct?
I’m sorry, I accidentally placed the footer inside the container as well (duh! It’s very difficult to take care of the opening and closing of the tags). I’ve corrected the code now. Please check it now
I got it! So basically, we just had to take out the footer from the container div and keep the footer in it’s own row div?
Exactly. That’s what was the problem
I hope I haven’t annoyed you too much but I have one final question, when I try and look at my pen on my iphone (6 plus)
there are a few things that don’t look right
- The footer is “floating” and does not appear at the very bottom, it has some space below it
- I can move the webpage horizontally, I should be only able to move it vertically to scroll up or down but it scrolls horizontally too and that messes up the UX.
Any help on these issues?
Hi Joe! It’s not an issue at all. Regarding the problem that you’re facing right now, I tried to inspect the code on iPhone 6, 6 plus and iPad simulators and tried checking it on my device (Nexus 6p) and it seems to be working fine on each one of them. I find it strange because you’ve well followed the row system and it would never overflow horizontally. Please check StackOverflow and see if someone else is facing the issue of horizontal overflow in bootstrap. Kudos! 
Thank you for doing that! It’s good to know that they should be working just fine visually. I think it could be a problem with my iphone then. But I will ask on StackOverflow, should I link my pen to them?
You should. Also try adding screenshots of what problem you’re actually facing