Hello everyone!
After searching around both on this forum and elsewhere, I decided to bring up this problem that’s been bugging me for a while now.
In the project-grid of my portfolio website, I have added these three projects:
And here is the code that correlates with that picture:
/* PROJECTS SECTION */
.projects-section {
align-items: center;
text-align: center;
padding: 100px 0px;
background: $header_color_primary;
color: $header__color_secondary;
.projects-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
overflow: hidden;
grid-gap: 4rem;
width: 90%;
margin: 1rem auto;
.project {
background: $header__color_secondary;
color: #43464B;
}
.project-tile {
width: 80%;
border-radius: 7px;
margin: auto;
text-decoration: none;
.project-image {
height: calc(100%);
width: 100%;
object-fit: cover;
border-top-left-radius: 7px;
border-top-right-radius: 7px;
}
.project-name {
color: #43464B;
padding: 2rem 0.5rem;
}
}
}
}
As you can see, these three squares (the project links) are of different sizes and they don’t line up. I got these pictures through screenshots (so that may explain why they’re of different size) but I can’t figure out why they won’t line up horizontally. So my two questions are:
(1) Rather than screenshots, is there an easier (and possibly better) way of gathering pictures to represent a project that I want to add to my portfolio?
(2) How can I ensure that the project links are the same width and height on the web page?
Thank you in advance!
Brandon
