Skip to content
OverviewSolutions
19
Comments
136
MaximilianoDanielGarcia
@MaximilianoDanielGarcia

All comments

  • MaximilianoDanielGarcia•1,980
    @MaximilianoDanielGarcia

    Hi Alina, great job!

    One little thing, I've noticed that when you submit an answer without making a selection this is moving on to the next question.

    The rest looks excellent. Congrats!

  • MaximilianoDanielGarcia•1,980
    @MaximilianoDanielGarcia

    Hi María Paula, good job!

    In response to your question. You need to use media queries to change its design on different screen sizes. Here an example:

    @media screen and (width <= 650px) {
  .container {
        display: flex;
        flex-direction: column;
  }
}

    The code above changes the properties of your .container class when the screen width is less or equal than 650px. Visit w3schools for more details about media queries.

    I hope these was helpful to you.

    Marked as helpful
  • MaximilianoDanielGarcia•1,980
    @MaximilianoDanielGarcia

    Hi @camigamboa, great job!

    There is an very useful browser extension called Perfect Pixel that allow you compare with the design image and thus see the exact dimensions. I use it and I recommend it to you.

    I hope this suggestion is useful for future projects.

    Marked as helpful
  • MaximilianoDanielGarcia•1,980
    @MaximilianoDanielGarcia

    Hi @AbrahamTegene, good job!

    If you are wondering how to center it, let me show you 2 easy ways:

    • Using Flex Box
    body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}
    • Using CSS Grid
    body {
    display: grid;
    place-items: center;
    min-height: 100vh;
}

    For the attribution part, you can do this:

    .attribution {
    position: absolute;
    bottom: 25px;
}

    I hope these was helpful to you.

  • MaximilianoDanielGarcia•1,980
    @MaximilianoDanielGarcia

    Hi @Specticall, great job!

    I've noticed that the main image is cut off and that's due you are using object-cover instead of object-contain tailwind class. After you have replaced that class you will need to add a background-color: #0f0f0f; and a z-index: -1; on header tag.

    After you apply these suggestion it will better. The rest looks very good.

    Marked as helpful
  • MaximilianoDanielGarcia•1,980
    @MaximilianoDanielGarcia

    Hi Rohan, good job!

    Here are some suggestions that might interest you:

    • I noticed that your #profile-card should be taller, try with min-height: 612px;.

    • Swap the background colors of #profile-card and buttons. The card should be dark-grey and buttons grey.

    • You should change the buttons' height, try with height: 45px;.

    • Semantically, buttons should be anchor tag because they are redirectioning you to another sites.

    After you apply these changes It will look better.

    Marked as helpful
  • MaximilianoDanielGarcia•1,980
    @MaximilianoDanielGarcia

    Hi @imonBlaze, good job!

    Check this code to improve your background image and to center the card:

    body {
    display: grid;
    place-items: center;
    min-height: 100vh;
    background-size: contain;
    background-color: hsl(225deg 100% 95%);
    background-position: center -25%;
}

    The background-size: contain; property resizes the background image to make sure the image is fully visible.

    After you apply these it will be look better.

  • MaximilianoDanielGarcia•1,980
    @MaximilianoDanielGarcia

    Hi Lamar, great job!

    If you're wondering how to center it, you can use either Flex Box or CSS Grid.

    • Using Flex Box:
    body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}
    • Using CSS Grid:
    body {
    display: grid;
    place-items: center;
    min-height: 100vh;
}

    And if you want to adjust your background image to the screen size just add background-size: cover;

    After you apply these suggestions it will look better.

  • MaximilianoDanielGarcia•1,980
    @MaximilianoDanielGarcia

    Hi Lamar, great job!

    If you're wondering how to center it, you can use this:

    body {
    display: grid;
    place-items: center;
    min-height: 100vh;
}

    Then, remove the padding from body that isn't longer necessary.

    I hope these was helpful to you.

  • MaximilianoDanielGarcia•1,980
    @MaximilianoDanielGarcia

    Hi @laplatacryptos, great job!

    If you are wondering how to centered, you could use CSS Grid:

    body {
    display: grid;
    place-items: center;
    min-height: 100vh;
}

    Then, you should remove the margin-top: 225px; from your section tag.

    After you apply these It will look better. Regards!

  • MaximilianoDanielGarcia•1,980
    @MaximilianoDanielGarcia

    Hi @cloudpc7, good job!

    Just 2 little things:

    • If you want to look it centered, you should add this:
    body {
    justify-content: center;
    min-height: 100vh;
}
    • I think the margin top on image should be margin-top: 1.5em;

    If you want to know the exact measurements for the design, you have a figma file in the starter folder.

    I hope these was helpful to you. Regards!

    Marked as helpful
  • MaximilianoDanielGarcia•1,980
    @MaximilianoDanielGarcia

    Hola Iván, buen trabajo!

    Tengo unas pequeñas sugerencias para mejorar tu desarrollo.

    • Para que se vea centrado sólo te falta agregar min-height: 100vh; a los estilos del body.
    • La fecha calculada debería estar alineada a la izquierda. Para hacerlo sólo debes reemplazar la propiedad margin: 0 auto; (esto hace que se centre) que tenés en .results p y agregarle un espaciado para que no se pegue al contenedor, algo así:
    .results p {
    padding-left: 60px;
    /* margin: 0 auto;    quitar */
}
    • Agrega cursor: pointer; al botón principal.

    Otro detalle que noté es que no hay validaciones en los inputs. Podrías utilizar inputs de tipo number que te permiten restringir el rango de números válidos. Te dejo este link que contiene ejemplos muy útiles de cómo utilizarlo.

    Espero esto te sea de ayudar. Saludos!

    Marked as helpful
  • MaximilianoDanielGarcia•1,980
    @MaximilianoDanielGarcia

    Hi @rame0033, great job!

    It looks really nice. If you want to centered just add this:

    body {
    display: grid;
    place-items: center;
    min-height: 100vh;
}

    Then, for the attribution you can do this:

    footer {
    position: absolute;
    bottom: 25px;
}

    After you apply these It will look better.

    Marked as helpful
  • MaximilianoDanielGarcia•1,980
    @MaximilianoDanielGarcia

    Hi Sebastian, great job!

    If you want to improve your background image you should add this:

    body {
    background-size: contain;
    background-position: center -25%;
}

    Also, I noticed that your .container class should have more height, maybe height: 650px; and remove its margin-top: 50px;

    After you apply these it will looks better.

    Marked as helpful
  • MaximilianoDanielGarcia•1,980
    @MaximilianoDanielGarcia

    Hi Sophia, good job!

    The thing with the image is your media query, you should set @media screen and (max-width: 375px) instead of min-width. Then you can improve the background image using background-size: contain; and background-position: center -25%;.

    Also, I noticed that the card isn't fully centered, you can do it adding this styles:

    body {
    display: grid;
    place-items: center;
    min-height: 100vh;
}

    After you apply this code you need to remove the .content-container div, It is no longer necessary.

  • MaximilianoDanielGarcia•1,980
    @MaximilianoDanielGarcia

    Hi @siil3omary, great job!

    I think you need to change the height to 100vh instead of 1440px. After you apply this It will looks centered.

    Regards!

    Marked as helpful
  • MaximilianoDanielGarcia•1,980
    @MaximilianoDanielGarcia

    Hi Christina, great job!

    If you are wondering how to center text, you should just add text-align: center on your .inner-qr-conteiner class. For the rest it looks really nice.

    Regards!

  • MaximilianoDanielGarcia•1,980
    @MaximilianoDanielGarcia

    Hi Julia, good job!

    It's work perfect and It looks similar to design but I notice that it too big. It's due you are using vw unit so the larger the screen resolution the larger the component looks.

    To have an approximation of the measurements I use a browser extension called Perfect Pixel that allow you to overlay and compare with the design image.

    I hope it is useful for future projects. Happy new year!