advice generator v2

Community feedback

• 

  P

  Grog the Frog•480

  @GregLyonsPosted over 2 years ago

  Looks good, and cool to hear that you took the time to update it after receiving feedback! I have a couple suggestions as well:

  1) It's subtle, but there's actually a separate divider for mobile and for desktop (your divider line looks a lot smaller in desktop mode than in the design). One thing I learned yesterday (shout out to @isprutfromua was that you can use a <picture> element to change which image is displayed based on the viewport width. Read this for more info. I find that a lot of these Frontend Mentor challenges change the image based on the viewport dimensions, which is quite common and also precisely what this <picture> element is for.

  2) I see you put your :hover pseudoselector in a media query. I'm assuming you intend for the :hover to not activate on mobile/touch screen devices. That's actually something I haven't thought about before, and after reading a little bit it does seem like having :hover states on touch devices can be a bit disruptive. I feel like, though, that it's a bit dangerous to just use min-width: 50rem to detect this. I found the answers to this StackExchange question to be pretty helpful. It looks like you could use different properties in your media queries than just the width.

  I hope this helps!

  Marked as helpful

  0

  ---

  

  Suprefuner•470

  @SuprefunerPosted over 2 years ago

  Hi @GregLyons,

  Thanks for your comments!

  1. haven't used <picture> before and it's so useful! thanks for sharing!
  2. don't know that I could use hover in my media query. Another new inspiration!

  1

  

  P

  Grog the Frog•480

  @GregLyonsPosted over 2 years ago

  @Suprefuner No problem! I didn't know I could use hover in my media query either until I found that stack exchange solution while investigating 2 lol

  I think you can use media queries to search for a lot of device capabilities like that, so I'm keeping that in mind too.

  0
• Account deleted

  Hello there! 👋

  Congratulations on finishing your challenge! 🎉

  I have some feedback on this solution:

  • put the quote inside a <blockquote> tag instead of p to be more semantic

  • check the HTML report to fix accessiblity issues

  i hope this is helpful and goodluck!

  0

  ---

  

  Suprefuner•470

  @SuprefunerPosted over 2 years ago

  Hi @Old1337,

  Thanks for your comment and fixed~

  0