Tribute Page Review!

Hello everyone!

Just completed my first tribute page for the Responsive Web Design Cert :slight_smile:

Love to get some feedback.

https://codepen.io/mahboibrink/pen/bXgNxW?editors=1100

Cheers!

1 Like

Great job. it looks wonderful. Try making it responsive and it will be perfect.

1 Like

@MahboiBrink Great first project!!!
I made some changes to the #image to make it responsive. Here is the code.

  • The image.
#image {
  width: 100%;
  height: auto;
  display: block;
  margin: 0 auto; /* This one liner is very common to center an item */
  max-width: 625px;
  /* margin-left: auto;
  margin-right: auto; */
  /*     width: 625px;  Stops the image from being responsive. */
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  /*   text-align: center; Not necessary for an image. */
}
  • In mobile view increase the width of the #tribute-info element.
#tribute-info {
  padding: 0; /* Remove the default padding from the ul element */
  width: 96%;
  display: block;
  font-size: 18px;
  /*   margin-left: auto;
  margin-right: auto; */
  font-family: "Pacifico", cursive;
}
  • In mobile view you can remove the margin from all the items and just add padding to the outer element.
#main {
  padding: 0 1rem;
}
  • Add a media query for responsiveness. When the browser is less than 550px wide these settings will be used.
@media only screen and (max-width: 550px) {
    #tribute-info {
        width: 96%;
    }
}
  • In Codepen click on Tidy HTML and Tidy CSS to format your code better. It will be more readable.
2 Likes

Last but not least :wink::
Go to Pen Settings --> HTML --> Click โ€œInsert the most common viewport meta tagโ€ --> Save & Close.

2 Likes