Responsive Intro-section using CSS-Grid And Flexbox

Community feedback

• 

  T

  Grace•31,270

  @grace-snowPosted about 1 month ago

  Hi, as well as the mobile overflow issues I raised on discord I spotted in the html that this is currently inaccessible. It's very important when implementing drop downs like in this challenge that you consider keyboard and screen reader users. That's simple enough to do — effectively you must use a button (not link or div), and this must include aria-expanded to communicate the expanded/collapsed state.

  Take a look at the guide to see all requirements and an example: https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/.

  I've also written up a detailed tutorial on https://FEDmentor.dev if you want to read that.

  Note these are essential learnings so make sure you take the time to understand them. It's the kind of thing that has big implications in a job later on if components are built inaccessibly.

  Also make sure you understand the difference between links and buttons (what they are for) as they are muddled in some places here. Like "learn more" would navigate to a resource so should be a link.

  Marked as helpful

  0
• 

  Adriano•38,390

  @AdrianoEscarabotePosted about 1 month ago

  Hey Uzma Khan, how’s it going? I was really impressed with your project’s result, though I have some advice that could be helpful:

  I noticed that at higher resolutions the content is moving a lot further away, to solve this we can do the following:

  body {
      max-width: 1440px;
      margin: 0 auto;
      display: flex;
      align-items: center;
      flex-direction: column;
      justify-content: center;
  }
  

  Everything else looks great.

  Hope this helps! 👍

  Marked as helpful

  0

  ---

  

  Uzma Khan•160

  @UzmakhPosted about 1 month ago

  @AdrianoEscarabote The issue still persists. I adjusted the max-width according to my laptop, but it is not working and still showing overflow.Are you on discord...I want to send the scshot there.

  1

  

  Adriano•38,390

  @AdrianoEscarabotePosted about 1 month ago

  @Uzmakh Yeah, same username!

  1

  

  Uzma Khan•160

  @UzmakhPosted about 1 month ago

  @AdrianoEscarabote I tagged you in help channel

  0

  

  Adriano•38,390

  @AdrianoEscarabotePosted about 1 month ago

  @Uzmakh call me in dm

  0

  

  T

  Grace•31,270

  @grace-snowPosted about 1 month ago

  @AdrianoEscarabote that isn't how mentoring works here?!

  0

  

  Adriano•38,390

  @AdrianoEscarabotePosted about 1 month ago

  @grace-snow I can't find his message on the discord help channel, so I thought the best approach would be to use the direct message on discord, since he knows my username.

  0