This is a solution to the 3-column preview card component challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.
Users should be able to:
- View the optimal layout depending on their device's screen size
- See hover states for interactive elements
- Solution URL: My solution
- Live Site URL: Github Pages
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
Although it may not be the same in other situations here's how I managed to center things in this project.
.how-to-center-in-middle-of-screen {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.how-to-center-button-div-text {
height: 40px;
line-height: 40px;
}
I struggled with a number of common things in this project like centering this in the middle of the screen or in the middle of the div so I'd like to keep practicing so I know how to do that quickly and efficiently in every situation.
I would also like to focus on how I can make my CSS more concise and less clumsy because I think restructuring the HTML would allow me to reduce some lines of styling.
- Website - Animan Amit
- Frontend Mentor - @animanamit