hi! congrats on finishing this project!
tbh, I have no idea how u write the code
but if I can see the HTML file, I think u need more dividers for each section so u can set them with different sizes and displays.
here's how I'd do it:
.hero {
display: grid;
grid-template-column: 2fr 1fr
}
.skills {
display: flex;
flex-wrap: wrap;
}
/* add class skill for each item */
.skill {
width: calc(100% / 2 - 20px); /* adjust for each screen sizes */
}
.project-grid {
display: grid;
grid-template-column: 1fr 1fr; /* adjust for each screen sizes */
}
- div for contact and input (create two different grids for each):
.contact {
display: flex;
flex-direction: row; /* adjust for each screen sizes */
justify-content: space-between;
}
dont forget to add margin for each divs. or in the main-container if u put them in a container.
hope this helps🙌🏻 have a great day⭐