Responsive preview card component made with HTML and CSS using flexbox
Design comparison
Solution retrospective
I had some difficult to manipulate the height to mobile, does someone have another solution? (I coded all of it on mobile, so idk exactly how it is on desktop)
Community feedback
- @RaiIsNotYourGuyPosted over 2 years ago
Howdy,
If you are looking for some more examples for this challenge, you are more than welcome to check out my solution. I had trouble with the image with the filter on top. I had went with a mobile-first approach and then used a media query to create the desktop version. As for the image, I gave it a max-width and max-height to help it stay within the filter and also gave the card itself a max-width. I hope this helped answer your question. Let me know if you any questions.
-Rai
Marked as helpful0@emanuelmarques45Posted over 2 years ago@RaiIsNotYourGuy Thank you! I'll use those properties
0 - @Moon-SengPosted over 2 years ago
Hi, @emanuelm45
After I watched your code you did it great.
But there is something that you have to make exactly like the design, Such as font-size, spacing, font-family. I knew that you coded it all on mobile so I suggest you use
max-width
for your width problem in Desktop mode. And I strongly suggest that you should buy a new laptop or the second is okay! Coding on mobile will damage your eyes.I hope my comment helps you. Happy Coding :)
Marked as helpful0 - Account deleted
Hello there! 👋
Congratulations on finishing your challenge! 🎉
I have some feedback on this solution:
- Always Use Semantic HTML instead of
div
like<main>
<header>
<footer>
, etc for more info i hope this is helpful and goodluck!
Marked as helpful0 - Always Use Semantic HTML instead of
- @PhoenixDev22Posted over 2 years ago
Greeting @emanuelm45 ,
I have some suggestions regarding your solution :
-
Use landmarks
<main>
to wrap the body content and<footer >
for the attribution . HTML5 landmark elements are used to improve navigation -
You can use <ul> to wrap the
class="stats"
. -
The number and word have to be read together to make sense so need to be in the same meaningful element. so only a
span
or maybestrong
tag needs to wrap the numbers. the words likecompanies
should not be in paragraph tags. They don't need to be wrapped in anything as they are already inside a meaningful element (list item). -
Images must have alt text.
-
To center the card on the middle of the page , you can use the flexbox properties and
min-height: 100vh
for the **<body>
**like this:
body{ display:flex; align-items: center; justify-content: center; width: 100%; /*If you set a page width, choose ``100%`` over ``100vw ``to avoid surprise horizontal scrollbars. */ min-height: 100vh;/*using vh (viewport height) units to allow the body to set a minimum height value based upon the full height of the viewport. This also allows the body to to grow taller if the content outgrows the visible page.*/
-
Using percentages % for width can cause a lot of problem , consider using
max-width
to the container -
To improve the image overlay effect you should use blend modes. you can use background color, Use mix-blend mode and opacity to make it more like the design.
-
Never use
px
for the font-size.
Check the responsiveness again .
Overall , your solution is good, Hopefully this feedback helps.
0@emanuelmarques45Posted over 2 years ago@PhoenixDev22 Thank you very much for your help!
0 -
Please log in to post a comment
Log in with GitHubJoin 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