Recently, I've been working on my portfolio using a CSS grid to display cards as grid items. When viewed on mobile, the cards stack on top of each other, but on desktop, I have ensured that they are displayed next to each other.
Lately, I have encountered two issues:
- The skills card has an unnecessary amount of space, matching the height of the other cards
- The contact card is positioned at the bottom of the experiences card when ideally, it should be placed under the skills card to the right.
How can these problems be resolved?
In attempting to address the positioning issue with the contact card, I manually adjusted its placement. However, I am uncertain if this is the most effective solution.
*I also want to mention that the site is created using SASS *
// Attempting to adjust position of contact card
#contact {
position: relative;
left: 102%;
}
// Grid code (referenced in the provided image)
#sections {
margin: 1em;
display: grid;
grid-template: auto;
row-gap: 1em;
}
@media only screen and (min-width: 700px) {
#sections {
grid-template-columns: 1fr 1fr;
column-gap: 1em;
}
}