@Tayara97
Submitted
What are you most proud of, and what would you do differently next time?
.
What challenges did you encounter, and how did you overcome them?
0
What specific areas of your project would you like help with?
.
@mihai3636
@Tayara97
Submitted
What are you most proud of, and what would you do differently next time?
.
What challenges did you encounter, and how did you overcome them?
0
What specific areas of your project would you like help with?
.
@mihai3636
Posted
Hello, there!
Very nice solution! Here are some tricks which I hope you might find helpful:
body {
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
By doing this you could get rid of the margin auto trick and you'll have it vertically centered as well.
.product-box .info .before-sale::before {
bottom: 50%;
}
Let me know if you've got any questions, keep up the good work!
@ilyass-oulhaj
Submitted
Any feedback is welcome.
@mihai3636
Posted
Hey, there!
The component looks neat, great job! If you had troubles to reproduce the discs from the background, this is how I'd do it:
Let me know if something is not clear or if you disagree.
Once again, great job and keep it up!
Marked as helpful
@maliabadziukh
Submitted
I used background-image property to insert the QR code image and style it. Is that a good practice? What would be a better approach?
@mihai3636
Posted
Hello!
I'm not entirely sure if that is a good practice or not, but I could share a piece of advice that I just received as well.
I noticed that you used "height: 100vh" there. That is going to cause problems if you zoom by ctrl + "+". (go more than 150% and your content will be cropped)
The reason is this: when you zoom, the size of everything else changes, but the size of your container will stay constant at whatever 100vh is. (This happens because your viewport has the same height whether you zoom or not. So 100vh will be the translated to the same value in pixels before and after the zoom)
If the size of everything else increases but the container's height is the same, it leads to overflow and that's why you see the component appear as cropped.
The solution is to use min-height: 100vh;
Also, congrats for your submission! The card looks neat!
I hope I was clear enough and please take what I said with a grain of salt and do your own research as what I just told you is my own interpretation of my own research and I do not claim to be 100% right.
Marked as helpful