Status Card

Community feedback

• 

  Nabil-Y•150

  @Nabil-YPosted about 3 years ago

  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.

  1

  ---

  

  Tomas Scerbak•720

  @TomasScerbakPosted about 3 years ago

  Hi @Nabil-Y , thank you very much for your suggestions. Yes my first approach was flex and to reverse it was much easier. But then I've changed it to GRID approach.

  I use object fit for imgs, but for this challange, everything works backwards :)

  from all challanges this one is giving my headaches

  Thanks again.

  1
• 

  P

  Ken•4,915

  @kens-visualsPosted about 3 years ago

  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 in style-guide file.

  I hope this was helpful 👨🏻‍💻 as a challenge, I'll leave the image part for you to fix 🙃 you got this. Cheers 👾

  1

  ---

  

  Tomas Scerbak•720

  @TomasScerbakPosted about 3 years ago

  Hi @kens-visuals , oh-my thank you very much it worked!!! I'm trying to understand your code with the layout in devtools, I just can't.

  do you happen to know, why is my whole container shrinking on mobile version?

  I've added font-family add main instead div for card

  Thank you very much!!!

  0

  

  P

  Ken•4,915

  @kens-visualsPosted about 3 years ago

  @TomasScerbak here, in order to fix the image, add these:

  .image {
      object-fit: cover;
      width: 100%;
      height: 100%;
  }
  

  You're very welcome 😇

  Marked as helpful

  0