HTML CSS

Community feedback

• 

  T

  Grace•31,230

  @grace-snowPosted almost 4 years ago

  Hi Matt On mobile I think you need to resize and reposition the bg images. Maybe hide overflow too as I can scroll offscreen in both axis/directions at the moment.

  Looking at the html I have 2 suggestions:

  • leave some of those alt attributes empty so assistive tech knows to skip over them if they're not meaningful, otherwise add much clearer descriptions that would make sense if you couldn't see the image.
  • in your table markup, the followers etc would have to be the <th> elements semantically. 80k doesn't make sense as a heading, but followers does. You can still have them in that order, or you can use css to reverse the rows, but the bottom row (as it stands at the moment) should be the table headers.

  Hope all that's helpful, keep on coding ☺

  2

  ---

  

  Matthew Van Pelt•575

  @Mattvp21Posted almost 4 years ago

  Hi @grace-snow,

  Thanks for the suggestion on the tables. I just turned the top row into table data lines and adjusted the font in CSS. Looks great. Working on the bubbles. I just started a bootcamp a couple of weeks ago and I don't quite have the mobile side down. Is there anything I need besides VsCode to make it optimal on mobile? Thanks again for your help!

  1

  

  T

  Grace•31,230

  @grace-snowPosted almost 4 years ago

  Nope nothing in particular, just use dev tools a lot (I like to have dev tools on the side so it's easier to frow/shrink the viewport width.

  You'll find all easier once you start building from mobile design first and working up from there. That habit builds over time

  0
• 

  T

  ApplePieGiraffe•30,545

  @ApplePieGiraffePosted almost 4 years ago

  Hey, Matthew Van Pelt! 👋

  Good effort on this challenge! 👍

  I suggest using CSS background images (or even pseudo-elements) to add and position the background SVGs in this challenge. That'll keep you from having any overflow issues and leave your HTML a little cleaner (it's probably also a little easier to position the background SVGs, I think). 😉

  Keep coding (and happy coding, too)! 😁

  1

  ---

  

  Matthew Van Pelt•575

  @Mattvp21Posted almost 4 years ago

  @ApplePieGiraffe Using the background image in CSS to position helped. For the overflow I just set it to hidden. Thanks for the tip!

  0
• 

  Dr. Derek Austin•30

  @DoctorDerekPosted almost 4 years ago

  The design has some more padding for those elements inside

  1

  ---

  

  Matthew Van Pelt•575

  @Mattvp21Posted almost 4 years ago

  Hi Derek,

  Added 20px padding-top. Looks much better! Thanks for your help!

  0

  

  Dr. Derek Austin•30

  @DoctorDerekPosted almost 4 years ago

  @Mattvp21 No problem! Don't forget to upvote my answer 😉

  I can't actually upvote yours until you upvote mine 😅

  0