@AmandagneSubmitted over 2 years ago
- How to know font sizes?
- How to identify if an element has a box-shadow of with very low opacity?
- How to know the exact spaces between different elements of the same parent?
Mohamed Magdy
@M0hamedMagdyAll comments
- @M0hamedMagdyPosted over 2 years ago
How to know font sizes?
- There is a website called fontsquirrel, where you upload the image and it'll identify the fonts. It might help you.
How to identify if an element has a box-shadow with very low opacity?
- I don't know an exact way but I guess you have to look closer.
How to know the exact spaces between different elements of the same parent?
- I use the select tool in paint 3d on windows to calculate the spaces between -and the size of- elements. But you shouldn't worry about it too much, your implementation looks very good and is nearly a pixel-perfect one.
Marked as helpful1 - @Gaurab019Submitted over 2 years ago
I found it difficult to properly align the items without flexbox. I am not sure about media query so I had calculated the width of the QR code container and put in the same value for the smallest of screen size. For the larger resolution I just let the container have the same value. Please suggest if there is a better of doing this
Please have a look at my code and let me know how can I make it follow industry standards.
@M0hamedMagdyPosted over 2 years agoDon't worry about centering items without flexbox. It's actually recommended to always use flex and grid systems. But you could also use "margin: 0 auto" on the card element with "width: 100% and height: 100vh" on the body and it will be centered.
You can use CSS relative units like "rems" which is relative to the ROOT font-size and then change it using CSS media queries. that will help you make it more responsive on different screens.
Or you can CSS percentages to let the browser do the calculations for you.
I would recommend web.dev "Learn Responsive Design". It will help you a lot
Marked as helpful2
