Tribute page - your feedback is welcomed and much appreciated. Thank you

Code Feedback
1

Hi guys, here is my tribute page, check it out by clicking the link below. Your feedback/criticism is welcomed and much appreciated.

I have got one question though. I tried to make the page fully responsive which I kind of did, however when I resized the width of browser to >= 1366px I wanted to center the content of the page (text, image and the link). In CSS I tried: #image { width: 640px; margin: auto;}, I also tried to add to it display: block and it didn’t work. I did center the class of .title in the top of the CSS and that works on all screen sizes, but I couldn’t make it work with the rest of the content when I have resized it to >= 1366px. I also tried to wrap the content into the

<div class="row">
    <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">

    </div>
</div>

and then style it in CSS the way I did before and it still didn’t work. Anyone knows why it didn’t work?

I kind of managed to center the content on screen sizes >= 1366px by using the left {} property but that is not the right way to do it, right?

If anyone knows what I should have done differently then let me know. Your help will be much appreciated. Please also let me know If there is anything else that I should do differently or could do better or easier way. Thank you.

Here is the link to the tribute page: https://codepen.io/Genome22/pen/xxbVRrz

2

Hi @Genome22, welcome to the forums. Your page looks good but there are some things you’ll want to revisit;

  • Keep the test script when forking the pen (<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>). Your page passes 7/10 user stories.
  • Don’t use <br> to force a break in a paragraph. Close one paragraph (</p>) and then start another.
  • You’re using absolute sizes (pixels). Try using percentages for sizing.
3

Hi Roma,

thanks a lot for your time and your feedback, much appreciated, reading a feedback from from my own work/project is best learning curve, at least for me. I will do the suggested changes to see what will happen.

4

My tribute page - any feedback is welcomed, thank you everyone for taking your time looking at my project and leaving some feedback. Much appreciated.

I have spent some more time on the tribute page and made some changes, now the page displays the way I wanted and is fully responsive, I have used percentages for sizing and removed the <br> as you have suggested.
However, when I run the test I get 5 out of 10 which is fail :frowning:
Is it because I have used CSS Grid?

Any feedback from other experienced coders will be much appreciated. Thank you guys.

5

Try to base your image width and height on percentages like width: 50%; and margin-left:25% or something like that.

What’s happening in what you’ve coded is that your image will always be 640px no matter what. If you base it on percent, then the image will take up (if you use my code example above) fifty percent of the browser width no matter how wide or thin the screen is.

If you look at the image below, your page does not adjust to small / thin screens well.

screenshot1
screenshot12560×1600 756 KB

What I mean by that is you have a horizontal scroll, your text isn’t centered, and your image takes up so much space.

Try to use css flexbox or grid, adding some media queries, and using percentages to style your pages.

Overall, you did a great job. Keep up the great work!

7

Hi Conner, thank you for your time and your feedback. Yeah, that is my first tribute page that I have submitted, I have fixed it and re-submitted with the new link to the new fixed tribute page. Here is is again. Would you look at it and let me know what you think? Thank you.

Thank you again.