Skip to content
OverviewSolutions
10
Comments
9

Gustavo de Camargo Campos

@themegazord200 points

Desenvolvedor Back-End Django

Latest solutions

View more solutions

Latest comments

  • Gustavo de Camargo Campos•200
    @themegazord

    Hi, @Zachcopro.

    First, congratulations for your effort and for having managed to finish another exercise with us.

    I saw in your project, that the div was not fully centered in the middle. You can fix this by inserting a min-height: 100vh and a flex-direction: column in your body, as stated below.

    body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

    I hope I have helped you for your next projects.

    Mark as helpful and give me an up vote if you think this was good for you. Thank you and see you next time.

    Marked as helpful
  • Gustavo de Camargo Campos•200
    @themegazord

    Hello my dear.

    First of all, congratulations for your effort in finishing your first project here with us :)

    Next, when he says 1440px Desktop and 375px Mobile, it's the size of the screen itself and not the card. The card will have to adapt to all dimensions between 1440px and 375px.

    So your card should follow the following logic:

    375px < your card < 1440px.

    Adaptations will be given responsively, using @media.

    Second, it's ok for you to use Bootstrap, being that it was the only way you could but the ideal was to try with CSS Flex or CSS Grid.

    A tip, for you to center everything in the center, you can use the following:

    body{ display: flex; flex-direction: row; justify-content: center; align-items: center; min height: 100vh; }

    This will make your card stop in the middle, the rest you will adjust according to what is necessary. If you want, I'll leave my repository of this exercise for you to see how it looks.

    Hope this helps.

    If possible, mark as helpful :-)

    It helps me a lot.

    Github: https://github.com/themegazord/Product-Preview-Card-Component Live Site: https://incandescent-phoenix-6d0d26.netlify.app

    Marked as helpful
  • Gustavo de Camargo Campos•200
    @themegazord

    Boa Murilo, parabéns pela sua entrega :-)

    Marked as helpful
  • Gustavo de Camargo Campos•200
    @themegazord

    Hi Amit Kumar, congratulations on the solution.

    Answering your question, the weird border, you would have to use the border: 1px solid transparent; to 'take off' any border that might be, since we set it to transparent.

    Corresponding to the delay when loading the image, try just creating it via HTML, and just set or not display: none, in the div to disappear and continue respecting display: flex the next time it stays.

    One last tip, the organization of your folders, you can create an assets folder and inside it create two more, with the name css and js and inside each, insert the responsible file for each folder.

    Don't forget to mark it as helpful :-)

  • Gustavo de Camargo Campos•200
    @themegazord

    Eu cheguei a colocar o media query, será que não funcionou no Netlify?

    @media screen and (max-width: 450px) {

    body {
    background-image: url('../../images/pattern-background-mobile.svg');
    background-repeat: no-repeat;
    background-size: 100vw;
}

.content {
    width: 350px;
}

    }

  • Gustavo de Camargo Campos•200
    @themegazord

    Hi Haydn Kerr, congratulations on the solution.

    I have some scores to make for you to improve more and more.

    1st Use classes and id in your HTML so that you can use them in CSS, this may not have been a problem, but imagine in a larger project, if you are guided only by HTML tags to assemble your CSS, you will become a monster kkkkk.

    2nd In your CSS, it might be easier if you use :root and declare the color variables for your project, so instead of writing the hsl every time you tell the browser that it will be called for example --primary -white or the color you want.

    Keep it up, you only tend to grow, congratulations.

    Marked as helpful
View more comments