Design comparison
Solution retrospective
Solution according to Mobile-first workflow
Feedback and tips are welcomed
Community feedback
- @0xabdulkhaliqPosted over 1 year ago
Hello there π. Congratulations on successfully completing the challenge! π
- I have other recommendations regarding your code that I believe will be of great interest to you.
BODY MEASUREMENTS π:
- The measurement of
lvh
is for only mobile devices, for desktops it don't have any effect asvh
- Then, you can use
min-height: 100vh
forbody
instead ofheight: 100lvh
. Setting theheight: 100lvh
may result in the component being cut off on smaller screens, such as mobile devices in landscape orientation
- For example; if we set
height: 100lvh
then thebody
will have100lvh
height no matter what. Even if the content spans more than100vh
of viewport.
- But if we set
min-height: 100vh
then thebody
will start at100vh
, if the content pushes thebody
beyond100vh
it will continue growing. However if you have content that takes less than100vh
it will still take100vh
in space.
.
I hope you find this helpful π Above all, the solution you submitted is great !
Happy coding!
Marked as helpful0 - @basitkoraiPosted over 1 year ago
Hello, my friend.
I'm really glad you completed the project.
Here are some suggestions to improve it:
HTML
- Wrap your component in an
<article>...</article>
element.
CSS
- Try this to prevent the card from hitting the edges of the screen
article { width: 80%; max-width: 23.4375rem; // (375px) as given in the style-guide // these values are not hard and fast rules, just an example, try to adjust the width and max-width and see what works best for your project. }
- Add these styles to the <main> instead after adding the
<article>...</article>
for centering the component
main { height: 100vh; display: grid; place-content: center; }
I hope these tips will help you improve your project
Happy CodingβοΈ
Marked as helpful0 - Wrap your component in an
- @kubas33Posted over 1 year ago
Hi! Thanks to your suggestion, appreciate it.
But can you tell me why you suggest to wrap content with article? I am trying to understand this so I know when to use this or not. I thought it isn't necessery to wrap component into another tag if there is only one section.
0@basitkoraiPosted over 1 year ago@kubas33 Hello, my friend. π
You're right it's just a single component (one section). But think of everything as you are coding an entire website. And in such case there would be other elements in your
<main>...</main>
element and then you will not just leave the elements just like that, you'll have to wrap them to make the alignment or styling them easier.-
I just believe doing so will form a habit that will be helpful in the future while creating real-world apps and websites.
-
it's just what I think not a hard and fast rule.
When to use
<article>
tag- A component (html element) which can standalone, no matter where it is in the site it explains itself, like a blog post, each card of song on Spotify, or video on Youtube, a post on Facebook , each comment or challenge here on Frontend Mentor and those all elements (articles) should be nested inside a section tag like
<main>
or a<section>
tag.
I hope my answer have cleared your doubts π
Happy CodingβοΈ
Marked as helpful0@kubas33Posted over 1 year ago@basit-flash
Thanks man! I really appreciate that you sacrifice your time to help me out! I will try to use more elements in my next challenges!
Do you recommend using <picture> tag as often as posible? For example when there is only one image irrelevant of screen size?
0@basitkoraiPosted over 1 year ago@kubas33 I don't use
<picture>...</picture>
tag every time I see an image. Here's what I do, every time I see an image,- If it's a hero image or something, I tend to use the
<picture>...</picture>
tag. Especially if the image is changing at different screen sizes, In that case, I opt for the<picture>...</picture>
tag. My example - If it's a decorative icon or the thumbnail of a blog post or video, then I would just stick to the
<img>
tag. As this project has a music icon in the plan selection section.
π Keep coding, Keep askingβοΈ
Marked as helpful0 -
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