Skip to content
Submitted about 2 years ago

Responsive layout using CSS Flex

SAUBHAGYA ASHISH•30
@saubhagyaashish
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...QR code component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

Hi Everyone This is my first solution. I really want you all to check and point out the areas where I need to improve. Any suggestions are welcomed.

Community feedback

  • PhoenixDev22•16,950
    @PhoenixDev22Posted about 2 years ago

    Hi SAUBHAGYA ASHISH,

    Congratulation on completing your first challenge. Your solution looks great. I have some suggestions regarding your solution if you don’t mind:

    • In my opinion, the alternate text should indicate where the Qr code navigate the user : like QR code to frontend mentor. The alternate text should not be hyphenated, it should be human readable. The alternate text should not be hyphenated , it should be human readable.
    • Adding rel="noopener" or rel="noreferrer" to target="_blank" links. When you link to a page on another site using target=”_blank” attribute , you can expose your site to performance and security issues.
    • width: 200pxan explicit width is not a good way to have a responsive layout. Consider using max-width to the card in rem instead.
    • height: 340px It's not recommended to set height to component, let the content of the component define the height.
    • In order to center the card on the middle of the page , you can use the flex or grid properties and min-height: 100vh to the <body>. Add a little padding to the body that way it stops the component from hitting the edges of the browser after you replace the .main with <main> landmark.

    Hopefully this feedback helps.

    Marked as helpful
    0
    SAUBHAGYA ASHISH•30
    @saubhagyaashishPosted about 2 years ago

    Thanks, @PhoenixDev22 for taking out your time and reviewing my code. It is really helpful. I will do the changes as suggested.

    0
    PhoenixDev22•16,950
    @PhoenixDev22Posted about 2 years ago

    @saubhagyaashish Glad to help and happy coding!

    0

Please log in to post a comment

Log in with GitHub

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord