@RestlessLizard
@stepstodev
Submitted
The MediaQuery is only for mobiel till 375px and Desktop-Version. I dont know if this is the best solution. What will be better solution instead. Just using Flex. I used it both together. maybe i could have declare some variables for colors and fonts.
@RestlessLizard
Posted
Hi, I would use 640px as a breakpoint for mobile (everything below is a mobile). I've taken that value from tailwind CSS and it works great across different mobile devices I've tried. 375px breakpoint is too small, it does not work on my pretty standard 6.7" phone. About the colors, I would definitely prefer to use variables. Never thought of using variables for the fonts, so thank you for an interesting idea :)
Marked as helpful
@PierreFrs
Submitted
Hi everyone !
For my first post on frontend mentor I'd really like some feedback on this task about the responsive side of the project. Also, I wasn't able to center the card vertically (is flexbox enough ?).
Thanks, Pierre
@RestlessLizard
Posted
Hi Pierre, good job!
The responsiveness was done as requested, but I feel like the mobile version could get better with some margins on the sides and top. Also, on the desktop version, the image seems to be a bit stretched. Other than that the responsiveness is good.
You can find a lot of resources on how to center a div vertically, here is a good one in my opinion: https://css-tricks.com/centering-css-complete-guide/
Other small notes: pay closer attention to the fonts, in your solution they are a bit bigger than in the design (and also check line-height).
Great job overall, wish you the best on your journey, don't let anyone discourage you!
@ohmgcj
Submitted
@RestlessLizard
Posted
Hello, you've done nicely layout-wise! But your fonts (font-family, font-size, line-height) might need some work. Also, the corners are a bit too round. I would recommend taking a look at the accessibility report, there are a few very simple issues you can fix in no time :) Other than that you've done great, congrats!
Marked as helpful
