My tribute page (first project)

Hi! I recently made my first project but i’ve encountered some problems. My page starts having problems when I zoom in too much/when i use a mobile device.
Here is my project:
https://codepen.io/bogdan-leica/pen/XWXKypy
I hope you guys can help me, and maybe give me some advice :slight_smile: I did a lot of research but I can’t really find anything that helps me with this.

A few suggestions:

  • Don’t put heights on wrapping elements, such as the #life div. The height should grow/shrink as the content grows/shrinks. Putting a specific height on it prevents that.
  • As for your mobile device issues, the fix for that is to design the page using a “mobile first” approach. You don’t need a mobile phone to do this. Just narrow your desktop browser as far as it will go and style the page so it looks good. This will be your base CSS. There should be no horizontal scroll bar. Then, slowly widen your browser until you come to a point where you feel you have enough horizontal room to rearrange things on the page for a wider view port. This will be your CSS break point. Use min-width for the break point and ‘em’ for the units. To ballpark the em value just divide the pixel width by 16. Using em makes your page responsive not just to changes in the view port width but also changes to the text size.
1 Like

Thanks a lot! I will use your advices. :slight_smile:

Welcome to the forums @BTheory. Some things to revisit;

  • Keep the test script when forking the pen (<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>).
    • The test script should be included, with all tests passing, when you submit your projects.
    • Your page passes 1/10 user stories. Click the red button to see which test(s) are failing and text to help you correct the issue.
  • Codepen provides the boilerplate for you. It only expects the code you’d put within the body element in HTML. (No need to include the body tags). For anything you want to add to the <head> element click on the ‘Settings’ button, then HTML and add it into the ‘Stuff for <head>’ box.
    • The link to the font goes in the box labeled ‘Stuff for <head>’
  • Run your HTML code through the W3C validator.
    • If you clean up per the instructions above then since copy/paste from codepen you can ignore the first warning and first two errors. If not, fix all the errors.
    • There are HTML coding errors you should address.
  • Review the lesson about giving meaningful text to links.
  • Make the page responsive
1 Like