My QR Code Component Solution with CSS and HTML

I only used one div .container and then styled the elements in the .container like this:

.container { . . . }

.container img { . . .}

.container h1 { . . . }

.container p { . . . }

Not sure if this is best practice but it was easier for me to keep the index.html file small.

I think what you did using max-width: 375px; was better than what I did.

I just used width: 322px;

Your resets could be made simpler by using a wildcard selector * which styles everything so instead of:

/* Remove default margin */
body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
    margin: 0;
}

You could do this:

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

Hello @bobbe86, You can change the <div> tag and the <card> tag to <main> tag. Ex: Instead of using <div> tag with the class of main, try to change it with the <main> tag and act as a card or let's say wrapping all the content.

When you Inspect elements in chrome you can resize them to 375 widths and 1440 widths. In chrome page right click > inspect > toggle device toolbar. The designs images you downloaded from the frontend mentor challenges, act as how it looks to 375px(mobile) and 1440px(Desktop). The toggle device toolbar in chrome is your friend. :) Hope it helps you this!