Latest solutions
Latest comments
- @Coffeemechanics@CryptoPawn
Hey. Great work with completing this challenge! I love the use of rem units on the text styling and is something I'm going to start using as well. I'm going to give a bit of feedback on the code which. I will also explain the problem you are having with the mobile version's positioning.
-
The text elements inside the header are wrapped into divs, applying the wrappers' CSS to their respective "content" would give the same result.
-
Each section's header has an unique class. Same result is achievable by using
section h3 { ... }
. This makes the code cleaner and one would not have to type them all out in the styling. -
The sections have their margin hard-coded, which can be tedious further down the line if one would want to add more cards. Making three flex columns containing the cards would offer a more simple and effective way of displaying the cards.
-
If you go to inspect the
<main>
and<header>
elements on the mobile version, you will see that these elements' has a margin extending out to the left and/or top. Removing these margins will solve your positioning problem.
Hope all of this comes in handy. Let me know if you would like to explain anything further.
Again, good job with this challenge, the website looks great and as intended! I'm excited to see more challenge solutions from you in the future!
Marked as helpful -
- @ivanparraoda@CryptoPawn
Hey, great job with completing this challenge! The final product looks very good. W3Schools have an excellent article on media queries, I recommend you checking it out here
In your solution you would add this to the bottom of your CSS:
@media screen and (max-width: 1020px) { .container { width: 330px; } }
You would have to change the CSS of other elements as well of course. The header image can be positioned at the top by using
display: flex; flex-direction: column-reverse;
in the container.Hope this helps and good luck with making the website responsive. Excited to see your updated version of it. :)
Marked as helpful - @J3RrY321@CryptoPawn
Hey, great job on completing this challenge. The solution looks very good!
- It seems like you forgot to add a drop shadow to your card. Try adding
filter: drop-shadow()
with parameters to your card. You can check out the docs for this here. - To optimize SEO, study semantic elements. In this challenge solution you could, for example, replace
<div class="container">
with<section class="container">
and wrapping its content in an<article>
element. - You have applied the same color value on different classes in your CSS code. I'd recommend you trying out variables. Example:
:root { --magenta: hsl(300, 43%, 22%); } p { color: var(--magenta); }
On a more positive note, your code is well structured, clean and easy to read. Hope you appreciate the feedback and I'd love to see more challenge solutions from you! Keep up the great work. :)
Marked as helpful - It seems like you forgot to add a drop shadow to your card. Try adding
- @Hanka8@CryptoPawn
Hey! Great job with this challenge, the final product looks very good. I'd like to offer some suggestions to improve the code.
- You have two divs with classes ´bg-1´ and ´bg-2´ which seems to be unused so they can be removed for a cleaner code.
- I'd recommend studying Semantic HTML for better SEO optimization. In your code ´<div class="card">´ could, for example, be replaced with ´<section class="card">´.
- For better accessibility, images should be described within the ´alt´ attribute.
- I personally don't like ´box-shadow´ and would use ´filter: drop-shadow()´ in this situation. The filter version looks a lot smoother.
- If you would like to center the card in exactly the middle of the website you could add following the code:
main { display: flex; align-items: center; justify-content: center; }
To end on a more positive note. You used variables and pseudo-elements in an excellent way. Your code is easy to read, understand and is well structured. Keep it up and I hope to see more from you! :)
Marked as helpful