Feedback on tribute page-stephen hawking

Feedback on tribute page-stephen hawking
0.0 0

#1

please do check my tribute page and give suggestions to improve it

here is the link-https://codepen.io/zeus990/pen/OvYwwG


#2

Pretty good.
At viewports over 1000px wide, you have some alignment issues (on the left, rather than centered). You may want to code extra margins at those larger viewports so that the readability of the page is maintained.


#3

@vipatron thanks for the feedback ,but forgive me i am just a beginner ,so can u tell me where exactly the readability issue is and what code i should add or modify.


#4

You’re using Bootstrap for the first project, which I did, too, before the Beta was launched. When I went to my first meetup, I was convinced to restart my learning there, and it was the best decision I made in FCC. However, if you want to complete this project in Bootstrap, then refactor it in raw CSS using media queries to make it responsive in the Beta (I did, it’s not that hard the second time around), then let me give you the advice to fix what you have.

Zeninvader’s excellent explanation of the Bootstrap Grid system will help you visualize the issue.

At viewports smaller than a medium one, your list takes up 100% of the width. At viewports “medium” and larger, your declaration of class="col-md-6" makes a half width (6 out of 12 vertical columns) container for your list, which is why it is off-center and never crosses the midline. You could, if you wanted the text to go no wider, declare some empty divs to the sides:

<div class="col-md-3"></div>
<div class="col-md-6">Your list goes here...</div>
<div class="col-md-3"></div>

What this is is telling Bootstrap.css to do (via hidden media queries that beta.freecodecamp.org will teach you how to do yourself) is:

  • at viewports smaller than “md” (<992px wide), render all three divs as the browser would without bootstrap:
    • Empty Div (no space on screen)
    • Your List (occupying 100% of the viewport width, responsive to the viewer input that resizes the window)
    • Empty Div (no space on screen)
  • at viewports 992 px or wider, bootstrap will create, Left to right on the screen:
    • Empty column (3 out of 12 columns wide, or 1/4 of the screen with)
    • Your list (6 out of 12 columns wide, or 1/2 of the screen width).
    • Empty column (3 out of 12 columns wide, or 1/4 of the screen with).

Tribute Page Completed! "Vixen"
#5

@vipatron, thank you so much for this !!!