Just spent all evening having a second attempt at the Fotomatic exercise after a frustrating 1st attempt earlier today. I got fairly far into it, but got stuck about 80% through and could not for the life of me figure out how to finish some of the tasks needed to repair the site. After looking at the solution code and comparing it to mine I had some questions regarding the discrepancies…
On line 29 the solution code has [ max-width: 100%; ] … why is this the piece of code that correctly resizes the two photos on the page to the correct size?
In the media queries throughout the css code, it uses two dimensions for screen size… [ max-width: 600px ] and [ max-width: 895px ]. I am working under the assumption that max-width 600px is for mobile devices and max-width 895px is for tablets. Makes enough sense, but is there any reason for the exact numbers being used… 600 and 895px? Are these arbitrary? On a previous codecademy exercise they had a picture of typical screen sizes and it listed mobile at less than or equal to 480px and a tablet in portrait at less than or equal to 768px. I was using those in my code but the solution has 600 and 895. Just wanted to make sure those aren’t set specifically for a certain reason?
On line 145 of the solution code it has [ left: 10%; ]. This is to position the green box in the exercise in from the left side of the page and I understand the concept behind it. However, in the spec page given in the exercise, it has that distance listed as 100px. I don’t see any where on the page to pull a 10% value from so just wanted to make sure I’m not crazy for thinking it should actually be 100px and not 10%? Even in the spec sheet if you compare the placement of the green box to the background image (look specifically at the glass behind the bottom left corner), the spec sheet is different than the solution webpage.
Other than that it would have been nice to have a lesson on flexboxes before this exercise… ha. Thanks in advance for the help!