Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

preview card using flexbox + responsive on mobile screens

@Bahbah89

Desktop design screenshot for the 3-column preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Fun challenge to experiment with flexbox more and making the website responsive on mobile phone. 2 main struggles I had with this one:

  • when the screen got smaller horizontaly the buttons got pushed further down outside the frame of their own section.
  • the footer pushed the container class to the left of the screen causing it not to be centered anymore,(luckily by using flex-direction column in "body" this solved the issue).

When researching regarding the "button" type, apparently flexbox can´t be used on it. Any advice how to tackle this one is welcoming. i saw you could also use grid for this. My default answer was using position absolute :).

Any other advice or tips are most appreciated!

Community feedback

Niklaus 160

@NiklausRupail

Posted

Congrats on finishing the challenge! To fix button problem you should set the max-width property on paragraphs so they don't scale that much when changing viewport. Also you can delete that footer because it's not in the design and set background-color to the color in style-guide.md!

1

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord