@evanhill1989
Posted
General advice: When starting this career path, no one has a large portfolio so we can't assume you actually understand the code that is partially correct.
This is why it's important on these challenges that you try your hardest to get your design to look exactly like the solution, especially for these earlier projects.
That being said, everyone comes to obstacles they can't get past without help, and there's nothing wrong with turning something in that you know isn't quite right.
Anyone can see the differences between your solution and the original , but we'll know better where to focus our limited time to help if you give some ideas on what differences gave you the most trouble. You have some beginner flexbox mistakes alongside some advanced code. This makes it difficult for helpers to know what level you're at if you don't ask for specific help.
Specific help on the more jarring visual inconsistencies :
- Centering your main card in the browser window.
If you want the content in your body to center you must give it room to center. Flexbox containers naturally shrink to the size of their content unless you code a different behavior for them. In this case the natural shrinking gives the item inside your container no room to center in the viewport window. The easiest fix is to define the height of your body to be the height of the viewport window -
body{ height: 100vh; }
There's probably more elegant ways to achieve this, but that will work for now.
- Your QR image is closer to the top than it is to the sides
Instead of styling items inside your container to create white space from the edge as you did on lines 58 and 65 of your CSS file, just style your containers padding directly for a uniform effect.
This means you'll also need to change line 59 to max-width:100%;
** Summary **
There's many other specific edits you need to make your solution appear identical to the original, but the most important thing is that you understand how flexbox works in general, not that you got it to work well enough on this particular entry. You can copy and paste advanced code to get close to right a lot on a lot of these projects, but if you have basic CSS errors alongside that advanced code it won't help your portfolio or your growth.
Marked as helpful
@mfahikk1
Posted
@evanhill1989 As I'm going through coding I didn't think much about simplicity, just coded. From your advices I have seen some points that I need to look through, specially simple CSS properties and flexbox properties.
I see the using flexbox properties inside to container is useless and also checked other changes too.
Thank you for you advices.
@evanhill1989
Posted
@mfahikk1
I'm glad you found it helpful.
I found this to be a great resource for understanding how flex works in a more general way --- https://youtu.be/42oAWKM5ars
In the very beginning, native english speakers have an unfair intuitive advantage when learning broader concepts because the majority of code is English-based, and many popular beginner resources are culturally and linguistically more similar for us.
Ironically, being an intuitive native English speaker can be a disadvantage later on because we get stuck thinking English words used in computer languages have identical connotations and larger meanings as those English words have outside of computer languages.
Feel free to ask me if you want help in the future.
So stick with it and you'll catch up and surpass others quickly!
Marked as helpful
