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
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.
- Review the lesson about giving meaningful text to links.
- Web Accessibility in Mind has a more thorough explanation
- “wikipedia entry” is not accessible