As a newcomer to web development, my first project is a fan-page dedicated to Metallica.
Here's the link to my project on Github.
I'm currently facing an issue with the flex-box layout in the "Discography" section of the page.
You can view the specific problem here.
In the "Discography" grid, I have 12 flip cards that need to be evenly spaced out in 4 columns and 3 rows.
The top row (row 1) and bottom row (row 3) are correctly formatted. https://i.sstatic.net/NDYj1.jpg
However, the middle row is not behaving as expected for albums like Black Album, Load, Re-Load, Garage Inc.
https://i.sstatic.net/dqDhc.jpg
If anyone could review my code, it would be greatly appreciated. While there may still be some cleaning up to do, everything seems to function properly on my laptop using VS Code.
Thank you!
.flex-container {
display: flex;
flex-direction: row;
justify-content: space-evenly;
}
.flip-card {
background-color: transparent;
width: 300px;
height: 410px;
perspective: 1000px;
display: flex;
flex-direction: row;
justify-content: space-evenly;
}
.flip-card-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.6s;
transform-style: preserve-3d;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
justify-content: space-evenly;
}