Status Card

Solution retrospective
I just could't swap the columns with grid areas :(
Please log in to post a comment
Log in with GitHubCommunity feedback
- @Nabil-Y
Hi @TomasScerbak,
If you want to swap elements from columns in a grid, you can use the css line "order" (https://developer.mozilla.org/en-US/docs/Web/CSS/order) just like you can do in flexbox.
Personally for this challenge, I used flex display and changed the order of the card content only for lower width screens, you're free to check my solution if you're stuck.
And one more thing, I recommend you use the css line "object-fit" (https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit) for your image so it can fill its parent div.
Hope this can be of help.
- @kens-visuals
Hey @TomasScerbak 👋🏻
I have some suggestions to help you fix the accessibility issues and some other things.
- In your markup,
<div class="card">...</div>
should be<main class="card">...</main>
and this will fix the accessibility issues. Don't forget to generate a new repot once you fix the issues. - In order to swap the content, add the following code to your CSS file.
.card-image item-1 { grid-column: 2 / -1; grid-row: 1 / -1; } . card-body item-2 { grid-column: 1 / 2; grid-row: 1 / -1; }
- Also, perhaps you forgot to include
font-family
, you can find it instyle-guide
file.
I hope this was helpful 👨🏻💻 as a challenge, I'll leave the image part for you to fix 🙃 you got this. Cheers 👾
- In your markup,
Join our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord