Picasso Painting preview does not look like what the final project ends up looking like if screen width is greater than the preview width

Describe the Issue

See this comment on the forum regarding the final version compared to the preview that is shown at the beginning of the project.

Affected Page

https://www.freecodecamp.org/learn/2022/responsive-web-design/learn-intermediate-css-by-building-a-picasso-painting/step-89

Your code

Expected behavior

I expect the final version of the painting to look the same regardless of the width of the preview pane. I think this project needs to be refactored so that the painting looks the same regardless of the user’s screen size. The elements should not shift around or if they do shift around, they should do so proportionately. You really notice the differences when you look at the eyes of the characters. They are hidden in the preview but show up in the final version. Maybe a fixed width for the project should be used.

Screenshots

Preview of project:

Actual final project in preview pane on my screen:

System

• Device: [e.g. iPhone 6, Laptop]
• OS: [e.g. iOS 14, Windows 10, Ubuntu 20.04]
• Browser: [e.g. Chrome, Safari]
• Version: [e.g. 22]

Additional context

No response

[ojeytonwilliams]

It sounds like quite an extensive rework would be required. Given that it’s still recognisably art, regardless of screen size, I think it’s fine as is.

[lasjorg]

Sure, it can be made fixed width and just have it overflow as well. Without having looked much at the code I would imagine that would still be quite a few code changes and I’d assume as a result test changes.

Edit: I’m not saying I disagree, or that improving it wouldn’t be worth it. I’m just saying it might take a bit of work.