Skip to content
Submitted almost 3 years ago

QR code component challenge

mexuz•10
@mexuz
A solution to the QR code component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

How can I center my div box more easily? What can I change in my code?

Code
Couldn’t fetch repository

Please log in to post a comment

Log in

Community feedback

  • Sergio•160
    @Serg1oxD

    body{ display: flex; flex-flow: column wrap; justify-content: center; align-items: center; min-height: 100vh; margin: 0; }

    If you add to body this styles and later add a element with HTML every new element will go to the center of the screen.

    And It's a good practice to have the styles in separate files, I recommend you create one .html file and one .css file and later link the .css using <link rel="stylesheet" href"path.css"> in .html file

    Marked as helpful
  • Lucas 👾•104,160
    @correlucas

    Hello Mexus, congratulations for your solution!

    Answering your question :

    The best way to align this component without using margins is by using flexboz and min-height: 100vh in the body to make the child (container) align to the parent (body). Using the flex properties align-items: center and justify-content: center. You don't need any position absolute or margins and its the cleanest and easiest way to write this code for alignment, it also gives you more control over the container for responsiveness.

    Hope it helps, happy coding!

    Marked as helpful
  • PhoenixDev22•16,830
    @PhoenixDev22

    Hi mexuz,

    Congratulation on completing your first frontend mentor challenge. Your solution looks great. I have some suggestions regarding your solution:

    • You should use <main> landmark to wrap the card and footer> for the attribution. HTML5 landmark elements are used to improve navigation experience on your site for users of assistive technology.
    • Page should contain <h1>. In this challenge , as it’s supposed to be a part of a whole page, you may use<h1> with sr-only class hidden visually and present for assistive tech users.
    • Images must have alt attribute. In my opinion, the image is an important content. The alternate text should indicate where the Qr code navigate the user: like QR code to frontend mentor not describes the image.
    • Adding rel="noopener" or rel="noreferrer" totarget="_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.
    • In order to center the card on the middle of the page , you can use the flexbox properties and min-height: 100vh for the <body> add a little padding to the body that way it stops the card from hitting the edges of the browser .No need for using position absolute.
    • width: 350px; an explicit width is not a good way to have responsive layout . Consider using max-width to the card in rem instead .
    • height: 540px;It's not recommended to set height to component, let the content of the component define the height.
    • Using percentages for widths, using max-width and avoiding to set heights for the components, with these things is the key to mastering responsive layouts.
    • Consider using rem and em units as they are flexible, specially for font size better to use rem. If your web content font sizes are set in absolute units, such as pixels, the user will not be able to re-size the text or control the font size based on their needs. Relative units “stretch” according to the screen size and/or user’s preferred font size, and work on a large range of devices.
    • Remember a css reset on every project. That will do things like set the images to display block and make all browsers display elements the same.

    Last , It's a good practice to have the styles in separate file he reason for this is that the CSS stylesheet exists for the purpose of defining the presentation style of the document. The HTML file exists to define the structure and content of the document also it's useful If multiple pages on your site have the same look and feel.

    Overall, Amazing work on this one. Hopefully this feedback helps.

    Marked as helpful

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