Bill Gates Tribute Page, First project, advice is appreciated

Pretty new to learning web dev stuff. This is the first project I’ve done. It’s fairly similar to the tribute page example, I wanted to focus primarily on applying some of what I’ve learned so far instead of trying to get overly creative.


This is a very nice looking page, mate.
One thing I noticed is that when you hit the mobile viewport, the image and the section disappears. Try using @media () {} queries; but first, make sure the section where the image is is 100% to its parent.

I think that the quote is also not responding to the viewport.

Take a look at this MDN site about media queries.

You know something I always do? I design the mobile version first, and media query up to tablet, short screen and larger screen sizes later.

The design looks really good, except for the problems that @germanbobadilla has already explained. This leads you to the solution.
A tip by the way : The margin-left and margin-right with 300 pixels lead to image problems when resizing the page.

Good job :+1:

1 Like

Hey, thanks! Honestly, I mainly just made it fit my monitor. I definitely should have spent more time on making it better for other screen sizes. I like your mobile first approach. If I’m reading this right, you normally account for 4 total different screen sizes? I’d hate to accidentally not account for a device. Thanks again!

Hey I appreciate the heads up on the image sizing! I’m definitely going to have to play around with that.