@JamesN-dev
Posted
Not bad for your first time. Pretty good! It’s great that you're diving in head first.
Here are a few thoughts and suggestions that might help you refine things a bit:
-
Layout Structure:
- I noticed you’re using Flexbox, which is perfect for centering elements. One thing you might consider is wrapping related items in
<div>containers. It can give you a bit more control over the layout and make it easier to manage styles.
- I noticed you’re using Flexbox, which is perfect for centering elements. One thing you might consider is wrapping related items in
-
Responsiveness:
- It looks like you’re using percentage widths, which is a good start. To make sure the card looks good on all screen sizes, you could try adding
max-widthandmin-width. That way, it won’t get too small or too big, depending on the device. - Media queries might be something to look into next as well. They let you tweak styles for different screen sizes, like maybe bumping up the font size on larger screens for better readability.
- It looks like you’re using percentage widths, which is a good start. To make sure the card looks good on all screen sizes, you could try adding
-
Styling:
- The box shadow gives the card a nice depth. Great job on that.
- Your colors match the original perfectly. Great job on that as well.
-
Image and Text Styling:
- The rounded corners on the QR code look a little flat on one side. You could fix that by using the same
border-radiusvalue instead of different values for each corner. - The text looks good and is easy to read. Maybe try playing with the font sizes or weights to create a bit more hierarchy between the heading and the paragraph.
- The rounded corners on the QR code look a little flat on one side. You could fix that by using the same
Overall, you’ve done a fantastic job. You have a solid base here to improve upon. Keep experimenting and having fun. Thats really what its all about.
Cheers, JamesN
@LeikoRed
Posted
Hi @JamesN-dev about responsiveness, so you say that it could be like:
width: 100%;
max-width: 220px;
min-width: 80px;
I was considering using media queries, but since it was my first time, I didn't want to add many styles.
With border-radius I have a problem. At the beginning, I only put
border-radius: 20px
However, when I see the qr image, The bottom corners are not rounded, they remain as they are. That's why I tried to increase them side by side until a change is noticed. I was seeing if any other styles are interfering with it, but haven't found one so far.
Thank you very much for your feedback, I appreciate it so much.
