CSS media Querries . Flex box and some additional css properties
Solution retrospective
in this project there is nothing to be surprise about it but the fact i would like to discuss about that is media query I would definitely like to say i counter the main problem in design at very early stage so i need to focus on my every design to make it 100% percent responsive that's making me worried about it a lil bit
What challenges did you encounter, and how did you overcome them?in this project i faced big problem in img at bottom of card with h4 heading may be for that i was confused but end up with the solution of positioning method in css i would like to know about that if there any other solution is really available
What specific areas of your project would you like help with?at very early stages i don't think i need help about any specific part of the project but yeah definitely i eagerly waiting for responses which can make my coding better and give my coding to it's peak
Please log in to post a comment
Log in with GitHubCommunity feedback
- P@mkerr-github
Great job, well done.
For responsive purposes the convention is to convert pixel measurements to "rem". To do so divide the pixel value by 16 (as the base rem is 16px, because 16px is the default font size setting size on most browsers).
Then use max-width to set the large widths for desktop and min-width to set the small widths for mobile. Try to let the browser set the heights of elements unless you need a very specific height.
The convention is to use rem and sometimes em, instead of pixels for most items, as rem and em are more responsive than pixels. Pixels can be used for small elements like icons and buttons where you do not want the size to change even on small screens.
More details here: https://austingil.com/px-or-rem-in-css/#:~:text=Pixels%20are%20an%20absolute%20unit,the%20equivalent%20of%2024%20pixels.
Quick tip that will finish it off for you!
As well as the change in colour when the link is hovered over by the mouse, you should also add this functionality when the user selects the link using the tab key (called focus). A lot of users like to use the tab key to navigate quickly instead of just the mouse.
Try the tab key on your live website, and then for buttons/links on a well-known site, and you'll see what I mean.
Here's helpful relevant article:
https://dev.to/daaahailey/css-basic-8-hover-active-focus-4d78
If you found anything in this comment helpful:
Please remember to click the ‘Mark as helpful’ button, thank you!
Keep up the good work, and keep going! 👋
Marked as helpful
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