Hello, could someone please assess this?
Link to my code: https://jsfiddle.net/Keyboardguy/jrywu53f/5/
Link to task: https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/rwd_skills
Thanks!
Hello, could someone please assess this?
Link to my code: https://jsfiddle.net/Keyboardguy/jrywu53f/5/
Link to task: https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/rwd_skills
Thanks!
Great job on this task, @Keyboardguy! Your code works as inteded
There are some simplification you could do:
In your header you nested grid > flexbox > flexbox. You could simplify that whole header with this code:
header {
display: flex; /* separate the nav and title */
justify-content: space-between;
align-items: center;
}
header ul {
display: flex; /* mav navigation display using flexbox */
}
header li {
margin: 0; /* remove the margin used in the mobile design */
}
header a {
border: 0; /*remove the border used in the mobile design */
}
I don’t quite understand why you used a 12-column grid on <main>
since we only need two columns. You could use grid-template-columns: 3fr 1fr;
and let <article>
and <aside>
be placed automatically.
As a general note: When I was experimenting with different values in your code I found out that online editors put styles in the HTML panel after styles in the CSS panel. So I think it’s best to always put all the styles into the CSS panel to have control over the order.
I hope that helps. If you have any questions just ask.
Have a nice day,
Michael
Hello,
Thank you for the feedback! The header you suggested looks much cleaner than mine. Also, the reason why I used a 12 column grid was because of this:
I thought that every grid layout for the main part of a website should be 12 columns or 16 - which I now know is not always the case.
Thanks, Keyboardguy
Ahh, I see. Now I understand
It’s definitively not wrong. Just a bit overkill for the simple layout in this task.