Skip to content
OverviewSolutions
11
Comments
10
Nantue Polchevski
@Nantue

All comments

  • Nantue Polchevski•170
    @NantuePosted 10 months ago

    Hello @YuBaichuan2000,

    Good job 👏

    para centrar el contenido agrega al `body {

    display: flex;

justify-content: center;

align-items: center;

flex-direction: column;

height: 100vh;

    }`

    0
  • Thaís Vieira•120
    @thaisavieiraSubmitted 10 months ago

    Please, check out the read.me in [my repository] (https://github.com/thaisavieira/profile-card-componet) where you can find more about my process how I built this project, and what I learned. Do you have any tips about how can I make it even better? Could the way I defined the spacings be done more cleanly?

    Practicing Flexbox skills with Profile Card Componet challenge!

    4
    Nantue Polchevski•170
    @NantuePosted 10 months ago

    Hello, @thaisavieira

    Good job 👏

    What you can do is place a "display: flex" to the "ul" and a gap of 50 pixels.

    `ul {

    list-style: none;

    display: flex;

    gap: 50px;

    }`

    1
  • Nantue Polchevski•170
    @NantuePosted 10 months ago

    hi @replayzor

    Good job on your part. 👏

    I recommend you remove the loading at the beginning of the page because it seems that the page is broken in the image.

    Marked as helpful
    1
  • Nantue Polchevski•170
    @NantuePosted 10 months ago

    hello @sisart003, thanks for your like,

    your card looks great 👏

    You could add the color and the image together in one line with this code.

    background: hsl(225deg, 100%, 94%) url(images/pattern-background-desktop.svg) no-repeat top/contain;

    no repeat: it is so that the image is not repeated.

    top: so that the image is on top.

    contain: so that the image fits inside the container without losing its original proportion.

    and adjust it with the background size: using vw (viewport width) and vh (viewport height).

    0
  • Nantue Polchevski•170
    @NantuePosted 10 months ago

    Hello @emmanuel470

    Your solution looks great! 👏

    I have a couple of suggestions:

    What causes the page to look like this is that you don't reset it, to reset it put this code *{ margin: 0; padding: 0; box-sizing: border-box; }

    Also, I see that you have a problem centering the content, you can center it in the body with this code:

    display: flex; justify-content: center; align-items: center; height: 100vh; background-color: rgba(213,225,239,255);

    Marked as helpful
    0
  • Nantue Polchevski•170
    @NantuePosted 10 months ago

    Hello @abdelrahman-mohammed1 how are u? I recommend that if you want to center the content you do it in <body/>.

    it would stay this way:

    body { background-color: hsl(218, 23%, 16%); display: flex; justify-content: center; align-items: center; height: 100vh; }

    0
  • Nantue Polchevski•170
    @NantuePosted 10 months ago

    Almost perfect

    0
  • Nantue Polchevski•170
    @NantuePosted 10 months ago

    hello @jen67, good work.

    Many folders in GitHub, I would recommend that you go to the visible files folder and there upload all the files only to the repository and not all the folders, I don't know if I'm explaining myself correctly.

    1
  • Nantue Polchevski•170
    @NantuePosted 10 months ago

    How do you know the perfect pixel of the cards?

    5
  • Nantue Polchevski•170
    @NantuePosted 10 months ago

    in ".main .links .social" would take out the width: 100% so that you can focus better on the main.

    Marked as helpful
    0