Desktop First and Added Hover Effects

Community feedback

• 

  Jason Moody•300

  @MoodyJWPosted about 3 years ago

  Excellent job on this! A few things I'd like to offer some pointers on.

  Your html has a few issues, mostly related to accessibility and convention.

  • a <main> element should always be present in html. I'd suggest replacing your <div class="showcase"> with <main class="showcase>
  • you're missing the <footer> from the design and that will also improve accessibility
  • don't nest <button> inside of <a> tags. If you want to make the <a> look like a button, you only need to style it. Something like below should give you an anchor that looks like a button as a place to start.

  a {
    background-color: blue;
    color: white;
    padding: 1em;
    text-decoration: none;
  }
  

  As for the Galaxy Fold, I think it's due to your width: 280px; being set on the card class. That's the exact width of the Fold. I honestly have no idea how to best handle the device, but you might have more luck setting the width to a calculated value. An extra media query would work as well.

  I just looked at my own solution and it's broken on the Fold too, so I'm probably not the one to help you on this right now lol

  Overall you did great, keep it up!

  Marked as helpful

  2