Responsive card layout using flexbox
Design comparison
Community feedback
- @sarvothamgowdaPosted about 2 years ago
Hi Stephen,
Good job. You can add a few lines of code to improve it even better. For example:
- Since, you did not define the viewport height the card has flushed all the way to the top.
body { min-height: 100vh; }
This will give enough room to center your container.
- For letter-spacing in the span inline element. Defined property is invalid.
span { letter-spacing: 15px; }
- For the desktop version the image dimensions and size of the card are different. You can also make use of @media queries to build a responsive mobile card which allows the child items to stack on top of each other.
Hope this helps!
0 - @Valhalla-2Posted about 2 years ago
well done @StephenAlcantara on completing the challange, As for your question, semantic means that the html tag has to describe it's meaning to the browser and to the developer like " header, main, form, tables, article etc" as for your question you should have put your all content inside the "main tag" rather than 'section tag ', that way it is more semantic , and instead of using 'div' you could have used 'picture' tag for the picture , set the flex-direction of 'body' to column in that way your content will be center aligned , and you find responsive design a little difficult like me , you should watch this video https://youtu.be/srvUrASNj0s?list=PL6Efx19_XLN9e5BwNvUg62gbNINyabt-_ it helped me alot ,overall you did a great job , happy coding journey
0 - @AtichotzPosted about 2 years ago
you forget to do responsive website :), but anything else is great
0@StephenAlcantaraPosted about 2 years ago@Atichotz Thanks, first time trying out things. Can you tell me what specifics did I failed? That would be really appreciated!
0@AtichotzPosted about 2 years ago@StephenAlcantara hmm I appreciated, just try to help i thing you forget to do responsive then i said that thing, im newbie too
ปล.ใช่คนไทยป่ะครับ ถ้าใช่ผมไม่เก่งภาษาอังกฤษเท่าไหร่ ถ้ามันสื่อความหมายผิดก็ขอโทษด้วยนะครับ ผมกำลังหาเพื่อนคนไทยในนี้ครับ
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