Skip to content
Submitted about 1 year ago

Responsive page using flexbox for mobile and desktop view

Skanda Aithal K R•60
@SkandaAithal
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

Hello everyone! I am a beginner in web development. Here is my solution for the challenge. Please do check my media queries for mobile view(375px). If there are any corrections, lemme know. Thank you!

Community feedback

  • Kanishka Priyashantha•690
    @kanishkasubashPosted about 1 year ago

    Hi, Skanda Aithal👋. Congratulations on successfully completing the challenge! 🎉

    Your solution looks great, and you've done a fantastic job overall! However, here are some small suggestions after taking a look at your code to make it even better that might interest you:

    HTML:

    • The <main> element should wrap around the entire component. Using the <header>, <main>, <footer> elements provide structural clarity, accessibility improvements, SEO benefits, and facilitates responsive design. It helps you create well-organized, maintainable, and user-friendly web pages.
    • It's important to note that the alt text should be descriptive but concise, conveying the essential information without being overly long. It should provide a meaningful summary of the image's content and purpose. (Eg: alt="QR Code for frontendmentor.io")
    • Starting with <h1> and working your way down the heading levels <h2>, <h3> etc. helps ensure that your document has a clear and consistent hierarchy. Source
    <body>
    <main class="container">
        <div class="card">
            <img class="card-image" src="images/image-qr-code.png" alt="QR Code for frontendmentor.io">
            <h1 class="card-heading">Improve your front-end skills by building projects</h1>
            <p class="card-description">Scan the QR code to visit Frontend Mentor and take your coding skills to the
                next level</p>
        </div>
    </main>
    <footer><div class="attribution">...</div></footer>
</body>

    CSS:

    • You should use a CSS reset. A CSS reset is a set of CSS rules that are applied to a webpage in order to remove the default styling of different browsers.

    CSS resets that are widely used:

    Reset CSS

    "My Custom CSS Reset" by JoshWComeau

    • To center the content properly and make your layout more flexible, consider using min-height: 100vh. This way, your content will adjust to fit the screen height regardless of the device.
    • You can use the max-width, margin and padding to control the width and position of your elements. For example:
    • Percentages are often used to define widths, heights, and margins. They are relative to the parent element's size. For example, width: 50% would make an element half the width of its parent. For example:
    .container {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;    
}

.card {
    max-width: 20rem;
    background-color: hsl(0, 0%, 100%);
    border-radius: 0.938rem;
    text-align: center;
}

.card-image {    
    width: 90%;
    border-radius: 0.625rem;
    margin: 5%;
}

.card-heading {
    margin: 2% 5%;
    padding: 0 5%;
}

.card-description {
    margin: 5% 5% 12%;
    padding: 0 5%;
}

    I hope you find this helpful! 😄 Keep up the great work! 👍

    🖥️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