FCC Tribute Page - Feedback

Code Feedback
11

I have these suggestions:

This will display a bigger images on smaller screens. Use max-width to stop it at the width you want.
For the image:

#image {
/*   max-width: 70%; */
  width: 90%;
  max-width: 1024px;
  display: block;
  height: auto;
  margin: auto;
  border-color: #514d3f;
  border-width: 3px;
  border-style: solid;
  padding: 2px;
  box-shadow: 0 10px 20px;
}

You set a lot of sizes in pixels. Setting pixel is not the greatest idea. It is better to use rem because pixels do not change in size.
For the width of the paragraphs:

#tribute-info {
  font-family: Cinzel, arial;
  font-size: 2rem;
  color: #514d3f;
/*   padding-left: 150px;
  padding-right: 150px; */
  padding: 0 .5rem;
  text-align: justify;
  text-justify: inter-word;
}

In your media queries you and using min-width and max-width together. In my experience you only need to use min-width if you are starting at the mobile size and max-width is for when you start your design at desktop view and want to shrink your page smaller.

Mobile first media query example:

@media (min-width: 400px) {
  /* your code */
}

@media (min-width: 600px) {
  /* your code */
}

@media (min-width: 1000px) {
  /* your code */
}

Going from desktop to mobile is like this:

@media (max-width: 1000px) {
  /* your code */
}

@media (max-width: 600px) {
  /* your code */
}

@media (max-width: 400px) {
  /* your code */
}
3 Likes