Off-platform Project: Fotomatic

Hi!
This was my first debugging experience.
I spent a lot of time trying to center the ‘banner’ over the background image . It seems to me I haven’t done it properly.

https://ruzannastubbs.github.io/Fotomat-Project/

Hi guys,

Here are my:

Hello! I have a question:
Why is it so - @media only screen and (max-width: 600px :question: but 895px :question:)? Where is max-width in this project?

Hi! I’m struggling with this as well.
I’m also unsure about why to use the specs when they also say to use Chrome Dev Tools.
So far in this path, we have not been taught to read Specs.
Did you finish the project?

Here’s my attempt: https://peta1dev.github.io/Fotomatic/

Here’s the code: https://github.com/peta1dev/Fotomatic

I couldn’t figure out a way to make the Features images have the same kind of horizontal to vertical resolution ratio as in the spec document when the page is at tablet resolutions, without resorting to Javascript (which we haven’t covered yet). So I just didn’t worry about it as the change in width/height ration wasn;t explicitly mentioned in the spec. I see in the solution that they didn’t worry about making their images change width-to-height ratio in tablet resolutions anyway.

I used the following site to help me decide what to use for breakpoints for phones and tablets: https://www.hobo-web.co.uk/best-screen-size/ - I used 480px for phones and 800 for tablets.

I also put in additional breakpoints between tablet and phone resolutions to keep the layout tidy and a few breakpoints when in desktop resolutions between 800 and 1280 horizontal pixels, as I found that the desktop specs as given kind of break the site layout a bit with text wrapping in the large font size headings and in the nav bar. So my project satisfies the spec at 1280px width and above, and at 800pixel width for tablets and 480 pixels or less for phones.