lani0016 / animal-rescue-website Goto Github PK

The header on the adoption page is really large

FireFox Desktop - There is an about button at the bottom of your page that is just there, I'd suggest their removing it and putting in your nav or get rid of it. As well, your nav buttons should probably be styled to look more like a navigation and they shouldn't stay white when the header is hovered.
Nice Favicon 👍

Chrome and Opera Android - Your images get squished at smaller sizes, they should retain the same aspect ration as they do at larger sizes
I'd add a pad-b on the bottom of the I'd like to Adopt! button

Banner > Banner is very long on my Android, it has a lot of space, maybe room for a logo?

Buttons > add some styling to your buttons, a nice hover state, but make sure the color contrasts the red :)

Footer > footer not completely styled yet

Adopt page > maybe add some accessible links to your adopt page on the names of the pets so it can link to the adoption form

Bar at the top is way too big. Everything is functioning tho

The entire nav has a hover that makes the links disappear.
Also the text starts very close to the edge of the screen.

Issue: I would say that the main issue has to do with the styling. The first thing, is that the text on a website should be a sans serif font for better readability. The second thing, is the spacing. The content touches the edge of the screen on each page and there is too much empty space at the top of each page.

Solution: I would suggest adding a gutter/padding to add nice spacing along the edges of the content, it makes it look less overwhelming. I would also try to remove most of the empty space at the top.

Hard to read and navigate. The images are very big and the navigation is hard to see when hover. For some reason, there is sometimes a big space on top of it.