Design comparison
Solution retrospective
I'm proud to make the card responsive to both mobile view and desktop view
What challenges did you encounter, and how did you overcome them?I had a problem on changing the image on desktop preview in the @media and i overcome it by using content: url()
What specific areas of your project would you like help with?I would like help on squeezing the header to make it align exactly as in design, i tried using right padding but didn't work. I would like help on removing the scroll bar on mobile preview, i tried to set the height of body to fit content but didn't work
Community feedback
- @DylandeBruijnPosted 3 months ago
@Jackson-zablon15
Hiya! ๐
Congratulations on your solution, it looks very close to the design! I can tell you put a lot of effort into it.
Things I like about your solution ๐
- Use of semantic HTML elements
- Clear descriptive CSS classes
- Use of CSS custom properties
Things you could improve โ๏ธ
-
I suggest adding a bit of
padding
to yourbody
element so the card has some space around it on smaller viewports. -
You could add a
min-height: 100vh
to yourbody
element so it takes up the full height of the viewport while still being able to grow when the content inside it grows. -
Try using using relative CSS units like
rem
andem
they make your layout more adaptable. -
Be careful with setting a fixed
width
andheight
on your elements. If the content in these elements grows beyond these restrictions youโll run into overflow issues. Keeping theheight
atauto
- whichblock
elements are by default - will be fine in most cases. -
Try styling your elements using classes instead of IDโs. Most of the time they are the better choice. IDโs are mostly used to select elements using JavaScript, navigation on the page itself and to style unique elements.
-
You donโt have to wrap your image in a separate
div
, itโs possible to style it directly to achieve the same result. -
Try using the
picture
element and making your solution more responsive.
I hope you find my feedback helpful! ๐
Let me know if you have more questions and I'll do my best to answer them. ๐โโ๏ธ
Happy coding! ๐
Marked as helpful0@Jackson-zablon15Posted 3 months ago@DylandeBruijn Thank you so much for the help. I'm going to use your tips and i know i will learn alot from them.
0 - @Rui-Martins23Posted 3 months ago
Hi @Jackson-zablon15, Not sure if this may help, but try giving on the @media ccs part, 50% width to both "image" and <section>. This way both parts will only ocupy half of the container <main>, and I think you can then use padding as were you were trying to, on the <section> part.
Concerning the scroll bar, you can use the following on the body element: body ::-webkit-scrollbar { display: none; }
Enjoy coding!
Marked as helpful0@Jackson-zablon15Posted 3 months agoHi @Rui-Martins23, Thank you for your help especially that part of scroll bar, I'm happy to learn it. Enjoy coding too!
0 - @imranhossainemiPosted 3 months ago
Great work! Your use of css variable and build approach mobile first well-thought-out. Some minor mistake here and there in the work, but I think you will fix it as you learn in the future. Good luck.
0 - @jasonlimasPosted 3 months ago
Hey! Awesome work! It looks really good! However, I think you are having a minor problem with the desktop version. There's a little gap at the bottom of the picture. I had this problem too. I fixed it and the fix might work for you too.
Here's how you can do it: by setting display: block on either your .image class or your img selector. This might be the solution to the little gap at the bottom of the image.
Good luck for your future Frontend development journey! Hope you are having a lot of fun!
0@Jackson-zablon15Posted 3 months ago@jasonlimas Thank you for noticing that problem. I will try your solution and try to learn from it.
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