This is my first ever solution to a frontend mentor challenge, i had problems with creating the media queries for the challenge, i'm not even sure if the media query code i wrote is right according to the challenge, Please i'll appreciate a response on that and any other addition i should have made concerning my code.
change:
<meta name="overview" content="width=device-width" initial="" scale="1.0">
to
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
and, you can centralize the ".box" with flexbox, exemplo:
body {
background-color: lightblue;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
the width property in 'body' is not needed, as this small element is centered and will not 'exit' the viewport.
sorry if there are any english mistakes. I'm from Brazil
I found the project easy. Nothing difficult encountered.
Por questões de acessibilidade altera o h2 por h1
As tags semânticas são importantes, tente alterar:
`<div class="container">` para `<main class="container"> `
`<div class="attribution">` para `<footer class="attribution">`
I had a hard time with this one. I still seem to be struggling with vertical centering. I used margin-top, but it seems like there may be a better way. Can anyone help?
Try this
<div class='container>
<div class='qr-code'>
your code... {.qr-image; .info}
</div>
</div>
.container {
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.qr-code {
*/ your code that was previously in the .container. for example: */
background-color: hsl(0, 0%, 100%);
height: 500px;
width: 320px;
border-radius: 10px;
padding-top: 10px;
}
I didn't realize that the component was the exact same in the desktop design files and the mobile files for a little bit. I did a little bit of extra work because of that. I am still not sure when I should be using the direct CSS suggestions from the figma files or if I should be attempting to get as close as possible using REM units. Is one better than the other? Is there a best practice out there?
There is a bit of unnecessary code, for example, as the font-family is unique for the whole page, it could be added to the body.
h1 tag is missing, the div class="header" could be changed to h1 class="header".div class=""header-wrapper" the css properties are not having any effect.