This one was relatively simple. When sizing elements (padding, margins, etc), I tend to use 'rem' units everywhere to keep scaling consistent (especially when using the zoom only text option in browsers). Is it better to use 'em' or some other measure? I guess I'm asking where's a good resource for learning to build elements of your site that scale well?
Hi again, your solution looks great Bradley! The only slight change I would make would be to remove the border-radius from the middle card and the inner edges of the two outer cards to make it match the design.
Regarding if you should use 'ems' or 'rems' in your code, I don't think one is better than the other. As long as you know how they both work, just picking the best one for that situation seems to be the best option. I've been the opposite of you and using ems all the time (apart from for font-sizing), but I think I'm going to consider the situation more and use what I think is best rather than just sticking to the one unit all the time.
I can highly recommend Kevin Powell's YouTube channel for great tips about building responsively. Here is a link to a video he has about knowing when to use certain CSS units - it made me rethink using ems all the time in my code.
Challenges 01.
I wrapped all of the tags in div tags<class="container">. Is there any better tag than the div tag?
Hi @sukyungdev,
Well done on completing your first challenge here! It looks really good! The only thing you could do to make it closer to the design is adding a little more padding to the bottom of your section element. Also, there is a very slight box-shadow on the section element of the design as well which you could add - it is hard to see though, and I missed it myself first time!
With regards to the div tags you asked about, it's fine to use div tags here for your container as you've used appropriate semantic tags for your qr section and footer.
One other thing to point out is I noticed you've sized the qr img. A really useful tip is on any img to set max-width: 100%; on it. This stops imgs being bigger than their parent container and you wouldn't need to size your img here, as the parent container will stop it growing to be massive. It took me ages to realise this myself. Remove the width and height properties from your .qr-code and add max-width: 100% and see the magic!
Hope this helps! Really, well done on your first challenge - you've done great! Claire
Hi Peter,
I think your issue is that on your .container you have set a fixed size for your grid-template-rows to 240px, so in the smaller screen sizes, the content of card one grows larger than that and that is why your content cuts off.
You could either change your grid-template-rows to 1fr or remove the grid-template-row completely and let the grid set the rows implicitly.
Well done on the rest of your solution - it looks good!
hello, amazing coders here is my solution to the single-price-grid. will like to hear your feedback on ways I can improve more on my code.
Hi, your solution looks great - well done!
The only improvement I can suggest is that your box-shadow is currently on grid-section-A in your code, whereas in the design the box-shadow is around the whole thing, so I would put the box-shadow on your container instead to make it even more like the design.
Great work, keep going! :)
Are you know how to make Line between Name and Stats? I tried with border : thin solid or 1px solid, but cannot same with example.
Hi, your solution looks really good - well done!
You are nearly there with the line between name and stats. I think you just need to change the border-top to something like this: 1px solid hsl(0, 0%, 90%). You currently have it is as a cyan color, but it is a very light grey in the design.
Well done and keep going! :)
Hello, I used css grid in this challenge because i feel like grid is what being presented here. However I also feel flexbox could be an alternative approach. If anybody here knows the best approach I would appreciate the feedback.
Hi, your solution looks great! Well done!
I also used grid when I did this challenge as I felt like you, that was what was being called for. You could also have used just flexbox to build this too though. Either way would have been a good solution for this challenge.
Well done and keep going! :)
I'd love your feedbacks. If there's anything you think I could have done better, please stone me that feedback 😁
Your solution looks great! Very close to the original design - well done! Maybe add a box-shadow on the profile card to make it even closer. Great work!
Hey guys. I'm stuck here trying to use flexbox to make this page responsive. I have tried using different flex properties including flex-grow/shrink/basis/wrap and media queries but I'm unable to stack the last box below when the screen gets smaller (ex: 678px) and I'm not sure what I'm doing wrong. I want to use only flexbox and not grid, float, etc. to complete this. I'm trying to completely understand how to use flexbox so any help is deeply appreciated.
Your solution looks really good on desktop - well done! The one thing I would suggest here for your issue with the smaller screens is that you should really start off coding for smaller screens first and then use the media queries to change things as the screen size increases. This is called mobile first.
One benefit of this is that on mobiles/small screens you’ll mostly be leaving the html in its natural flow, like in this design the mobile layout stays in its natural flow and you’ll find that you won’t need to use flexbox for major layout shifts until the screen size gets bigger. Effectively with the way you have done it in your current solution, you’ll have to undo a lot of the places you have used flexbox to get the mobile layout working and you’ll end up with a lot more code than you really need.
I hope this makes sense? Working this way made a big difference to me once I started doing it. You’re doing really well with using flexbox in your desktop design though, well done!
Took what felt like ages and a lot of googling and MDN referencing. I'd love some advice.
Hi Anthony, your solution looks really good! Just a few suggestions to improve what you already have - I would recommend changing the circle images to background images instead of img tags as they are only there as part of the visual design. Another thing you might want to look at is using more semantic html markup - you might have been able to use the main or section tags instead of div in places here.
Also I noticed that you have missed the dot in front of you cb class in your css at one point, so those styles won't show. Also you have an e on the end of solid in your .image-holder, so that style also isn't showing.
I hope I have helped in some way. Keep going and don't worry about googling things a lot - we all do it!
