Submitted over 1 year ago

QR code design using html and css beginner

rulotmndz•10

@rulotmndz

Preview site View code

This is a solution for...QR code component

HTML
CSS

1newbie

Design comparison

SolutionDesign

Solution retrospective

For me, it was difficult to place all the design in the center, i'm still confused in what cases change the margin and in which ones changing the padding is better.

Also, I'm a little bit unsure if specifying the elements widht in px was better than in percentages; I noticed that when using pixels the design doesnt change if I shrink or enlarge the browser window.

Community feedback

DragonFireShield•140

@DragonFireShieldPosted over 1 year ago

You managed to center the item horizontally by using margin: 130px auto;, but vertically it will always be 130px from the top. To improve on this you can try using flexbox or grid. Both allow you to center elements. For this to work for your code, we will first need to change the body declaration to:

body {
    background-color: hsl(212, 45%, 89%);
    font-family: 'Outfit', sans-serif;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.main-design {
    background-color: hsl(0, 0%, 100%);
    border-radius: 5%;
    width: 265px;
    height: 415px;
    text-align: center;
}

Or you can choose to use grid:

body {
    background-color: hsl(212, 45%, 89%);
    font-family: 'Outfit', sans-serif;
    min-height: 100vh;
    display: grid;
    place-items: center;
}

.main-design {
    background-color: hsl(0, 0%, 100%);
    border-radius: 5%;
    width: 265px;
    height: 415px;
    text-align: center;
}

For this case I think it is better to go with a width in px, otherwise your card will shrink on smaller screens and we also don't need it to grow.

Please log in to post a comment

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