Fixing my layout from desktop to phone
Hey, I'm working on figuring out the basic layout for my portfolio website and started building out a block-out of my design I made in Figma. I'm struggling with using the full viewport on phone. My homepage has 3 cards and on desktop they are placed in 2 even-columns. However, on phone I want the first card to fit the whole viewport and then the other 2 cards will also use up a whole viewport when scrolling down.
I've got the basic layout working for desktop and tablet sized screens, just not for phone. Seems like it's not using the full viewport size.
Here is my code: https://codepen.io/Hidde2205/pen/ExqwJYP
I've also added my designs for reference, any help is appreciated! If my current code that seems to work for desktop and tablet can also be made easier or better, please let me know
I've got the basic layout working for desktop and tablet sized screens, just not for phone. Seems like it's not using the full viewport size.
Here is my code: https://codepen.io/Hidde2205/pen/ExqwJYP
I've also added my designs for reference, any help is appreciated! If my current code that seems to work for desktop and tablet can also be made easier or better, please let me know



