@correlucas
Posted
👾Hello Miassa, congratulations for your solution!
I saw that you've found the way to put the live site on, thats good!
I've some tips about your solution:
1.You've set some value for the container height for this reason when the container stretch the text elements start to pop out the container due the fixed height value, to fix that just delete the container height, in this case the height comes from the inner elements and its padding.
2.You've used margin auto to align the container, and this works, indeed the container is centered, but note that this margin created a huge gap between the screen border and the container, forcing the container to contract much more than it should. My advice for you is to tdo this alignment using display: flex; using it in the body / container, its better than margin and position relative for alignment.
Hope it helps, and congrats for you first challenge ever!
Keep it up!
@Miassa35
Posted
@correlucas yes i found it thanks, so: for the 1st tip, i totally agree and i corrected it; teh 2nd tip: i didnt get it when you said "that this margin created a huge gap between the screen border and the container" because i used the tip of diplsay flex in the parent (body) and margin: auto in the child(.QR_container) to align vertically the container, i already align it with flexbox , justify-content and align-content and it give me the same result. ps: i didn't use position relative .
@correlucas
Posted
@Miassa35 Ah ok, sorry, I said that because often I see person doing this alignment with position: relative; now I saw that you've aligned everything with the margin: auto; that's fine, my bad.
Look the code below, I did some changes in your code, and was that I wanted to say:
body {
/* display: flex; */
/* width: 100vw; */
height: 100vh;
background-color: hsl(212, 45%, 89%);
display: flex;
align-items: center;
justify-content: center;
}
.QR_container {
display: flex;
max-width: 350px;
/* height: 65%; */
/* margin: auto; */
padding: 1em;
background-color: white;
border-radius: 15px;
text-align: center;
box-shadow: 5px 5px 40px hsl(220deg 15% 55%);
flex-direction: column;
align-items: center;
justify-content: center;
}
