I'm afraid there are quite a few problems with this. It's overflowing my screen and I can see some significant accessibility and performance issues in the html. I'll try to list them all out but don't be discouraged — these are all very common things.
Before that though, have a read of this post about how to plan out the html. Don't just copy it– read and make sure you understand the process of planning out the right html for the content in the design: https://fedmentor.dev/posts/html-plan-product-preview/
Read that and refactor your HTML before anything else.
And make sure you're not repeating Google font preconnect links. You should be able to select the exact families and weights you need in one go from Google fonts and add the 3 lines it gives you instead of all of these.
In css
- there is no element/selector called
fontso remove that from css. - get into the habit of including a full modern css reset at the start of the styles in every project. Andy Bell or Josh Comeau both have good ones you can look up and use.
- never limit the height of elements that contain text, including the body. It must never have a max height. Perhaps you meant to use min-height? It's the max height that is breaking the solution completely on my phone.
- don't use position absolute to center the component on the screen. Use flexbox. Make the body a flex column and use properties to center the component.
- the max width on the component must be in rem not px. This allows it to scale correctly for all users even those who change their default text size. It must not have a width at all (unless 100%).
- the image must not have a max width in pixels. Its max width must be 100% but that is included in a css reset anyway.
- media queries must be defined in rem or em not px. You're also setting the media query at the wrong point. Read this and I hope it fixes your understanding: https://fedmentor.dev/posts/responsive-meaning/.
- make sure the component can't hit screen edges. Add some padding to the body.
- the image is distorting. Include an object fit property.
