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.
Hello! I have a question:
Why is it so - @media only screen and (max-width: 600px but 895px )? 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 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.