Fotomatic CSS Debugging project - my solution (Front End)

Projects
#1

As the “Web Dev” path became the “Front-End” path I went back to make up the stuff that were not there before, including this project.
[Link to project]
This Project took me by surprise - It’s really not well explained but is actually simpler than it seems (too bad it took me a whole day to realize that).

Sans code samples, here is what I did to make it work:
HTML (index.html):

  1. Link the CSS stylesheet to your html! :wink:
  2. Fix the links to the images so they would lead to their location in your local directory.
  3. The comment that precedes the “quotes” section is missing a closing “>”, rendering the rest of the html a comment. Close the comment tag, to show the quotes section and footer.

CSS (style.css):

  • .image-container img : add a rule to set the maximum width as 100% - this is to make sure images are scaled down to the size of their container instead of being cut or overflowing.
  • Set the z-index of the header to a positive whole number.
  • sign-up section: add a background image that covers the whole container and doesn’t repeat.
  • Add a 38px padding to the feature content container.
  • The class selectors in the quotes section are incorrectly formatted.

I hope this helps! :slight_smile:

13 Likes
Walk Through video of the fotomatic pro project?
#2

thanks Yael, that’s a great response

#3

I believe there are still more issues to fix with the index.html and styles.css document. I made the same fixes that you mentioned above however my website looks like this:

image
image2559×1299 273 KB

#4

I was able to resolve the issues.

#5

thank you @yaelperez , your solution was extremely helpful.

I would like to add in some more for the CSS file:

  • add padding of 38px to h2 and h3 of .feature (so that the padding is similar to the solution page)
  • add display: flex to filters-section .images-container (to make the images line up next to each other)