Submitted 6 months ago

qr-code-component-main

FRYDPHROG•230

@FRYDPHROG

Preview site View code

This is a solution for...QR code component

HTML
CSS

1newbie

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

this was my very first project so i was proud that i was able to do the bare minimum but i need to learn how to display it properly on mobile devices.

What challenges did you encounter, and how did you overcome them?

learning how to size an image and center it. I looked around in W3schools for some help.

What specific areas of your project would you like help with?

I would like to learn if there is an easier way to center a div as well as how to keep the same aspect ratio for the div throughout any device

Community feedback

Roraima Lugo González•510

@roraima1986Posted 6 months ago

I recommend that you use the flexbox properties. Your container can look like this:

.container{
    display: flex;
    flex-direction: column; /*necessary so that all your elements are in one column*/
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    width: 500px;
    background-color: white;
    border-radius: 2rem;
    padding: 2rem;
    text-align: center;
    box-shadow: 0 5px 10px gray;

}

For mobile screens I recommend changing the pixel width values to percentages, so the div will adapt to any device.

@media only screen and (max-width: 500px){
    .container{
        width: 90%;
    }   
}

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