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.

1 Like

Hi,

here is my solution: link :eyes:

The online solution provided by system totally doesn’t look like a good solution so I’ve just focused on specs (which also have lots of questionable moments :thinking:)

However I really liked solving it as it was, I think, very similar to real life challenges.

Thanks for sharing! Very helpful to look through your solution in DevTools.

Also, glad I am not the only one banging my head against the wall with the Features images sizing for tablet :sweat_smile: