Desktop solution using CSS flexbox

Community feedback

• 

  P

  Katrien Schuermans•1,210

  @katrien-sPosted about 3 years ago

  The background-image doesn't load because you didn't set your path right. Try this: background-image: url("../images/pattern-background-desktop.svg");

  You need to escape the css-folder and dive into images, hence the 2 ..

  Marked as helpful

  1

  ---

  

  Boris•170

  @B0R155Posted about 3 years ago

  @graficdoctor Thanks a lot! Any other comments about the code in general? This is my first project ever, so really anything could be useful.

  0
• 

  P

  Ken•4,915

  @kens-visualsPosted about 3 years ago

  Hey @B0R155 👋🏻

  I have some suggestions on that will help you fix the accessibility issues and, perhaps, get rid of some unused pieces of code.

  • In your markup <div class="card">...</div> should be <main class="card">...</main>, so this will fix the accessibility issues. Don't forget to generate a new report once you fix it.
  • For the image, this is the only code you need:

  .card img {
     display: block;
     width: 100%;
     margin-bottom: 10px;
  }
  

  • <h2> should be <h1> because it's the heading, and probably you forgot to include bolder font-weight, that's why this line doesn't work font-weight: 900;
  • box-sizing: border-box; should be in html, so it affects the whole document, instead of adding to individual items.
  • Also, I'd suggest tweaking the background-color of the button.

  I hope this was helpful 👨🏻‍💻 for the very first project, you did a great job, keep practicing. Cheers 👾

  Marked as helpful

  0

  ---

  

  Boris•170

  @B0R155Posted about 3 years ago

  @kens-visuals Thanks a lot for the feedback! I will try to update the code as soon as i can.

  0