Clipboard_Landing_Page

Community feedback

• 

  P

  tediko•6,680

  @tedikoPosted over 3 years ago

  Hello, Walmanjm! 👋

  Good job on this one! 🎉 Your solution responds well and overall looks good. Here's my suggestions:

  • Change the alt attributes for the .header-logo, .snippets-cards, .access-device images, as they don't add any extra context for screen reader users. Since your images are decorative your alt text should be provided empty (alt="") so that they can be ignored by assistive technologies.
  • Wrap your li items inside .nav into anchor tag to make them clickable.
  • No need to add additionally div inside header or footer element with class "header/footer". You can add that class right away on that element.

  Good luck with that, have fun coding! 💪

  Marked as helpful

  1

  ---

  

  walmanjm•425

  @walmanjmPosted over 3 years ago

  Awesome @tediko thanks 🙏

  0
• 

  Anna Leigh•5,135

  @brasspetalsPosted over 3 years ago

  Congrats on submitting another solution! Overall, you did a good job. I do have a few suggestions:

  • To achieve the hover color change on the social icons, I suggest using inline svg and the fill property.
  • Note that the font sizes increase for the desktop version. Here you have kept them the same as mobile.
  • For the min-width: 320px & max-width: 812px media query on your header, you have a typo. Instead of background: cover, it should be background-size: cover.

  Marked as helpful

  1

  ---

  

  walmanjm•425

  @walmanjmPosted over 3 years ago

  @brasspetals nice suggestions Anna , thanks for the link, 👍

  0
• Account deleted

  Good solution, but on the buttons and the icons you are missing the hover states. On mobile the buttons are too spaced out.

  Keep coding.

  Marked as helpful

  1

  ---

  

  walmanjm•425

  @walmanjmPosted over 3 years ago

  @thulanigamtee Ok Thulani, noted,

  0
• 

  P

  Patrick•14,265

  @palgrammingPosted over 3 years ago

  Looks like you have almost everything required but you need to work on adding the hover states to your buttons

  Marked as helpful

  0

  ---

  

  walmanjm•425

  @walmanjmPosted over 3 years ago

  @palgramming Thanks Patrick, i will

  1
• 

  walmanjm•425

  @walmanjmPosted over 3 years ago

  Hi guys 😊,
  @thulanigamtee @palgramming @brasspetals @tediko

  thanks for giving me some advice, i manage to make some update based on your suggestion, if you have time please check the update : solution update

  for @brasspetals i am so sorry ✌ , seems i cannot make the "inline svg and the fill property" , but instead i used "fontawesome"

  0

  ---

  

  P

  Patrick•14,265

  @palgrammingPosted over 3 years ago

  @walmanjm I think one of the main issue now is that your 5 company logos in a row are not wrapping or transitioning to the mobile layout but overflowing out the sides on the browser when mobile sized

  0

  

  walmanjm•425

  @walmanjmPosted over 3 years ago

  ok i will check again,

  thanks Patrick for checking the solution again 👍,

  0

  

  Anna Leigh•5,135

  @brasspetalsPosted over 3 years ago

  @walmanjm Font Awesome totally works! 👍

  I've noticed some odd changes with your update, which is overall good. It seems the .workflow-list has lost the spacing between elements on the desktop version, and the .snippets-card-list text is now very cramped due to the width being so small (on desktop, again).

  For the .logo-list you could try adding flex-wrap: wrap to prevent the overflow that happens on some of the medium/tablet widths.

  0

  

  walmanjm•425

  @walmanjmPosted over 3 years ago

  @brasspetals yes Anna you are right.

  i forgot to add spacing in .workflow-list.

  and the .snippets-card-list the width should different in desktop and mobile, (thanks again ✌😂).

  i try make some change in vscode and run it :

  .snippets-cards-list become width: 30rem; in desktop. .snippets-cards-list width: 18rem; stay same in mobile. its work fine i see.

  flex-wrap: wrap it sure help👍

  0