Fotomatic

Hi guys, it’s me again. I am new to coding and i’m having a hard time with this Fotomatic broken code project. In the final project, the images are scaled in a way i’m not sure how. I included the links to the project and some screen shots of my project. Can someone please give me some advice as to how to achieve the final outcome? I already went through the final product but i am still unclear as to what i’m doing wrong?


I thank you in advance.

https://static-assets.codecademy.com/Paths/full-stack-career-journey/Fotomatic/final/index.html

https://www.codecademy.com/paths/learn-how-to-build-websites/tracks/responsive-design-and-accessibility/modules/css-documentation-and-debugging/informationals/f1-2-c1p1-fotomatic

When you ask a question, don’t forget to include a link to the exercise or project you’re dealing with!

If you want to have the best chances of getting a useful answer quickly, make sure you follow our guidelines about how to ask a good question. That way you’ll be helping everyone – helping people to answer your question and helping others who are stuck to find the question and answer! :slight_smile:





Screenshot from 2023-06-21 08-00-45

Hi, there!

Question: On the images themselves, do you have a max-width? (I don’t see the CSS for it.)

1 Like

Oh my goodness thank you so much that made it work.

So next time I have the same issue, I can just configure the max-width on an img and it will crop itself ?
Again thank you for taking the time to help me resolve this issue.


1 Like

It is typically best practice to apply:

img {
  display: block;
  max-width: 100%;
}

This CSS ensures image responsiveness and is included in most (if not all) resets.

1 Like