Skip to content
OverviewSolutions
19
Comments
136
MaximilianoDanielGarcia
@MaximilianoDanielGarcia

All comments

  • MaximilianoDanielGarcia•1,980
    @MaximilianoDanielGarciaPosted 10 months ago

    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!

    1
  • MaximilianoDanielGarcia•1,980
    @MaximilianoDanielGarciaPosted 10 months ago

    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
    0
  • MaximilianoDanielGarcia•1,980
    @MaximilianoDanielGarciaPosted 10 months ago

    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
    0
  • MaximilianoDanielGarcia•1,980
    @MaximilianoDanielGarciaPosted 10 months ago

    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.

    1
  • MaximilianoDanielGarcia•1,980
    @MaximilianoDanielGarciaPosted 10 months ago

    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
    0
  • MaximilianoDanielGarcia•1,980
    @MaximilianoDanielGarciaPosted 10 months ago

    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
    0
  • MaximilianoDanielGarcia•1,980
    @MaximilianoDanielGarciaPosted 10 months ago

    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.

    0
  • Lamar•515
    @EverezzeSubmitted 10 months ago

    Besides the fact that I forgot to adjust the error messages If you have any insight to improve the JS part let me know (there might be a more efficient way or whatever) or even the CSS part! It was a fun project anyways

    Intro with sign up form component (no flex/grid)

    1
    MaximilianoDanielGarcia•1,980
    @MaximilianoDanielGarciaPosted 10 months ago

    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.

    1
  • MaximilianoDanielGarcia•1,980
    @MaximilianoDanielGarciaPosted 10 months ago

    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.

    2
  • MaximilianoDanielGarcia•1,980
    @MaximilianoDanielGarciaPosted 11 months ago

    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!

    0
  • cloudpc7•180
    @cloudpc7Submitted 11 months ago

    In this solution what I found difficult was how to make it better using less code and create the symantic html that is most simple and basic. I know that this should be an easy challenge so I wanted to make it less code and simpler. I am unsure of the width and the height of the code.

    I believe I did a better job this time around. if there is any critiques that need to be made as far as detail I would like to improve. thank you for all the feedback.

    html, css, flexbox

    4
    MaximilianoDanielGarcia•1,980
    @MaximilianoDanielGarciaPosted 11 months ago

    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
    0
  • MaximilianoDanielGarcia•1,980
    @MaximilianoDanielGarciaPosted 11 months ago

    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
    0