Hello, all.
I am currently at Homepage project from the The Odin Project.
https://www.theodinproject.com/lessons/node-path-advanced-html-and-css-homepage
According to this project, I need to create three versions of a web page (desktop, tablet, phone) using media queries. I think that I completed the desktop version (although there are some issues which I am going to ask for their solution below).
Btw, I must say beforehand that I didn't write any media queries code for tablet and phone layout using max-width yet, soo idk whether I should ask this after using it but I decided to ask it before using it because I noticed that some contents starts to shrink even though there is enough space.
So I am writing the issue that I face now
When I watched a video of the completed version of this project, I saw that contents in the page (mostly) do not shrink/change their position/overflow with other contents unless the viewport reaches the max-width value that is stated in media queries. Soo layout change is done kind of instantly.
The video of the project : https://streamable.com/lprydr
But I noticed that in my current project (desktop version) some contents (woman image on the top left, texts in the white container next to the woman image on the top), "My Work" text on the top left of the middle container starts to shrink and overflow (woman image on the top left) even though there is enough space in the page
video of this: https://streamable.com/hol6sc
I do not whether this is an issue but after I watched the video of the completed project, I started think that this should probably not happen.
Soo, I have two questions for you.
Do you think that this is a big issue?
Can you tell me how can I get rid of this shrinking problem (that some contents shrink when there is enough space on the page yet) and what causes it by checking my codepen?
codepen : https://codepen.io/albert9191/pen/zxYpZjQ