All comments

• 

  Manny Andem•230

  @mannyAndemSubmitted over 1 year ago

  I didn't use any javaScript because I'm still just starting out :)

  I tried using gap in my flexbox container but it didn't work so I had to make do with margins. Could there be a reason why?

  

  Responsive Design Using HTML and CSS || No Javascript

  3

  40
  

  ailight360•70

  @ailight360Posted over 1 year ago

  Hi, congrats?? on completing the challenge. Better take care about following points.

  1. Always check Frontendmentor Report Generator issues after submitting the project for removing errors and warnings. To avoid accessibility issue.
  2. An**"img"** element must have an "alt" attribute, except under certain conditions. For details, consult guidance on providing text alternatives for images.
  3. This approach creates accessibility error reports, "All page content should be contained by landmarks" is due to non-semantic markup, which results in a webpage without a landmark.
  4. So fix it by replacing the <div class="container"> element with the semantic element <main> along with <div class="attribution"> into a <footer> element in your index.html file to improve accessibility and organization of your page.

  To used gap in a flex remove high

      height: 50%;
      justify-content: space-between;
  }
  

  1

  This comment has received 1 replyShow
• 

  thiha naing•150

  @thihaNgSubmitted over 1 year ago

  

  Results Summary Component

  1

  30
  

  ailight360•70

  @ailight360Posted over 1 year ago

  Hi, congrats on completing the challenge. Better take care about following points.

  • Always check Frontendmentor Report Generator issues after submitting the project for removing errors and warnings. To avoid accessibility issue.

  • An "img" element must have an "alt" attribute, except under certain conditions. For details, consult guidance on providing text alternatives for images.

  Hope you will find this Feedback Helpful.

  Marked as helpful

  2
• 

  cogendarmerie•200

  @cogendarmerieSubmitted over 1 year ago

  

  Results summary

  1

  20
  

  ailight360•70

  @ailight360Posted over 1 year ago

  By Changing this simple line of code spacing looks so much better

  instead of this

      height: 100%;
      width: 350px;
      background: linear-gradient(to bottom, hsl(252, 100%, 67%), hsl(241, 81%, 54%));
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      text-align: center;
      color: hsl(0, 0%, 100%);
      border-radius: 30px;
  }```
  add this line of code 
  
  ```section > div:first-child {
      height: 100%;
      width: 350px;
      background: linear-gradient(to bottom, hsl(252, 100%, 67%), hsl(241, 81%, 54%));
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      align-items: center;
      text-align: center;
      color: hsl(0, 0%, 100%);
      border-radius: 30px;
  }```
  

  1