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.
Note: Delete this note and update the table of contents based on what sections you keep.
Users should be able to:
- View the optimal layout depending on their device's screen size
- See hover states for interactive elements
Desktop Design:
Mobile Design:
- Live Site URL: https://ajdemarco95.github.io/FrontEndChallenge-2/
- Plain HTML / CSS
- Flexbox
While working on this challenge, all was going well until I went to check the mobile view.. Unlike the desktop version, which was displaying correctly, the mobile view was not centered on the screen. After first assuming the issue may lie with my CSS width, padding, or margin properties I had no luck and decided to search the internet for the answer.
After a minute of searching I discovered this thread on StackOverflow. After briefly reading the original poster's issue, I saw I had the same problem. Luckily, I applied the first response to my code and it instantly solved my issue! (Thanks, Omar!)
html, body {
max-width: 100%;
overflow-x: hidden;
}Im happy with the way my code turned out and seems to be an exact replica of the challenge provided from FrontEnd Mentor. However when resizing my display window on desktop, I notice the 'Learn More' buttons are not always in line with each other. I'd like to better understand why that is.
- StackOverflow - This website was incredibly effective at helping me solve my overflow issue (ironic, I know.). I will definitely revisit this site in the future.
- Website - AJ DeMarco
Thanks to Omar, a user at StackOverflow.com for providing the answer to my overflow issue!