Another tribute page to throw on the stack! (Please review!)

Code Feedback
1

Hello! I’d love some feedback on my tribute page. If you could help me streamline my code, I’d greatly appreciate it!

Codepen Link!

2

By streamline, I assume you mean responsive (works on all devices).
First off, you will have to remove set widths like:

.gray-box {
    background-color: #f7f2ef;
    padding: 35px;
    width: 900px;
}

The problem is that when the page is smaller than 900px, the content is off the screen and you have to scroll around. This is bad, but easy to fix. Just use percentage based widths:

.gray-box {
    background-color: #f7f2ef;
    padding: 35px;
    width: 80%;
}

To fix the image to make sure its on page, remove your set width and height you have in the .small-image or whatever class it was. Then add the bootstrap class .img-responsive to your image. Now your image will always fit on page.

3

Thank you for the tip! I tried adding .img-responsive at some point, but it didn’t work. I’m going to replace the set widths/lengths with percentages and add the .img-responsive class again.

4

Please let me know if you have problems, I will help.