Skip to content
OverviewSolutions
23
Comments
9

maym42

@maym42380 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

Latest solutions

View more solutions

Latest comments

  • maym42•380
    @maym42
    <img src="./images/image-qr-code.png" alt="" srcset="">

    You forgot to upload the "images" folder to github + forgot to define size (height and width) to the <img> element.

  • maym42•380
    @maym42

    you can do this change...

    body
{
    background-color: hsl(235, 18%, 26%);
    /*flex*/
    display: flex;
    justify-content: center;
    align-items: center;
    /*size*/
    height: 100vh;
}

.container {
    /* min-width: 46%; need to Delete!*/
    /* max-width: 768px; need to Delete!*/
    /* height: 61vh; need to Delete!*/
    background-color: white;
    border-radius: 20px;
    /* position: relative; need to Delete!*/
    /* top: 20vh; need to Delete!*/
    /* left: 60vh; need to Delete!*/
    /*flex*/
    display: flex;
    justify-content: space-around;
    align-items: center;
    /*space*/
    padding: 1em;
}
  • maym42•380
    @maym42

    You did a good job!😊😊😊

    But in order to make the right position (center the card in the screen), You have to use css grid (display:flex in the body) and not with position: absolute like you did in the container class. So your css should look like this:

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

    .container {
    width: min-content;
    border-radius: 10px;
    background-color: hsl(0, 0%, 100%);
    padding: 1em;
}

    .p1 {
    font-size: 1.5em;
    font-weight: 700;
}

    Hope I helped 😅

    Marked as helpful
  • maym42•380
    @maym42

    Hi Yuri,

    You did a good gob 🙂

    But I have some tips for you:

    In order to center the card in the screen. add to the body this css code.

    body{ background-color: var(--cor2); display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100vh; font-size: 15px; }

    And remove the margin ,height and the width form .prin{} so class .prin look like this:

    .prin { background-color: white; background-repeat: no-repeat; text-align: center; border-radius: 25px; }

    In addition it a good practice to use em units instead of px. In the body you have to define one time text-size in px ,and after that all the other things you defined with relative units like em.

    Hope I helped 😅

    Marked as helpful
  • maym42•380
    @maym42

    When I want to make the text responsive, I define the text in the body with "px" units ,according to the size written in the style guide file. And in all other places(class ,elements...) I define the text size in "em" units (Relative to the font-size of the element, so 1em = current font you define in px in the body).

    for example:

    • for regular text define 1em
    • for big text like title define 1.5 em
    • for small text define 0.75 em

    When you use @media for mobile screen just change the font size of the body to smaller size in "px"
    and as a result all other elements with "em" units will effects form that automatically.

    hope I helped you 😄

    Marked as helpful
  • maym42•380
    @maym42

    Hi, I also solved this challenge. You can look at my solution and maybe it will help you :)

    My solution

View more comments