Skip to content
OverviewSolutions
6
Comments
20
2div
@2div

All comments

  • 2div•170
    @2div

    Hi Ebuka, congratulation completing the challenge, you design look very close to solution design. To fix the accessibility issue in your report wrap your code inside main tag , you can write it like

    <main class="container"> </main> over all you did well.
  • 2div•170
    @2div

    Hi Kevin congratulation completing the challenge ,your design is very close to the main design.

    You have an issue with box size because i click to view the live website the "cancel order button" is not appearing on the website. you need to check your box size for large screen and mobile screen too.

  • 2div•170
    @2div

    Hi Your design look fine but you need to improve accessibility by wrapping your code in main tag ex : <main class="container">. Also add h1 tag.

    You need to add overly to the main image , its a part of the design requirement.

    I never used Angular and did not find your CSS file but above tips will solve the accessibility issues in your report.

    Marked as helpful
  • 2div•170
    @2div

    Hello Stephanie First of all congratulation on completing this challenge and your solution is very good. below are my tips for improvement :

    • Fix the a accessibility issue by change h2 to h1
    • Also you need to increase the border radius for the box and the button
    • You need to check the size for mobile screen because card look large.

    over all you did great.

    Marked as helpful
  • 2div•170
    @2div

    Hi Ashikod, i tried to open your code link but link is broken and not working. Make sure to write your correct github repo link.

  • 2div•170
    @2div

    Hi Sarad ,

    I see you use Bootstrap class that's great and advance than my code which is simple html/css your code is good too... congratulation completing the challenge.

  • 2div•170
    @2div

    Hi Nathalia, Congratulation completing the challenge. Your code is very good.

    Marked as helpful
  • 2div•170
    @2div

    Hi Heba,

    Well done , good code. i have one tip change the <div id="outro"> to <main class="container">

  • 2div•170
    @2div

    Hi Amber,

    Congratulation completing the challenge. Please find my tips below :

    1- I suggest you to change <div id="main"> to <main class="container"> </main>

    2- Yon need to add alt attribute to img tags in index.html atl attribute is used to provide information about images like what is the image about, image author, etc.Your tag should be like this <img src="images/image-qr-code.png" alt="QR-Code">

    3- change <div id="caption"> to <div class="text-content">

    4- Change the h5 to h1

    Marked as helpful
  • 2div•170
    @2div

    Hi Ahmed, First congratulation completing the challenge. Kindly check your GitHub repo code link because its not working when i clicked to access your code on GitHub repo.

    Marked as helpful
  • 2div•170
    @2div

    Hi William,

    Congratulation finishing the challenge. Below are tips :

    1- change <div class="container"> to <main class="container"> </main> 2-change <div class="attribution"> to <footer> </footer>

  • 2div•170
    @2div

    Good design ..well done

  • 2div•170
    @2div

    Hi, There is no one answer on how to solve the challenge. Although the challenge is very simple but it will better to do good practice. I would use flex to organize and practice what i learn. I think flex will allow me to have more control on the layout than just stacking on top of each other.

    here are my tips :

    • remove the flex from body tag because you used in the containers.
    • add the container class in the main tag. -use min-height: 100vh; in the container and remover margin from box -change the first p tag to h1 tag
  • 2div•170
    @2div

    Yon need to check the media query for mobile its not working.

  • 2div•170
    @2div

    Perfect design , good work.

    I see you are a Pro , I am think to upgrade to pro but is it worth it ? what do you think ?

  • 2div•170
    @2div

    Hi good work.

    I am new in field and i was just finish this challenge and i had many issues , but i got tips from the community to improve my practice.

    I see you use grid layout and it worked well. However i used flex box layout because its very small requirement and doesn't need much code.

    I think the practice its for flex out design.

    this is my humble tip. Again good work

  • 2div•170
    @2div

    Both design look same. Good work.

    My design look okay but it look smaller.

    https://www.frontendmentor.io/solutions/qrcode-responsive-design-with-flex-box-mfFGvShdV

  • 2div•170
    @2div

    Thank you both you @Deniel & @Raymart , your comment and feedback was very very helpful.

    @Raymart thank for your deep explaining it was really helped me a lot since im in the beginning in this field.

    I have revised my code and design and applied what learned from both you.

    I am really amazed how my code is less and everything is good.

    Only one thing on mobile display not okay, the card look too small , i could not find out why ? any idea about it?