Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

All comments

  • Cesar D.• 400

    @ThatDevDiaz

    Submitted

    Another HTML/CSS challenge by frontend mentor. No frameworks used.

    I came across two issues I could not resolve even after some research and spending time adjusting many things.

    First, I could not get the profile picture to fit within a circle as shown in the original solution. I've set the border radius to 50% and tried to shrink the image, but the image just would not respond to any of my CSS. I assumed it might be an inherited element affecting it's sizing or border but I could not locate it, if that.

    Secondly, I couldn't get the spacing under the statistics and it's label to go away. I have gap, padding, and margin all set to 0 but there's still a large space between say "80k" and "followers" when all these values are set to 0. Again, I think it might be an inherited element doing this but I couldn't figure it out.

    Thanks for reading and I'd appreciate any advice/tips!

    Profile card component

    2

    Aq1q• 220

    @Aq1q

    Posted

    Hi

    1 To make the profile pic fit within a circle you could give border-radius of 50% to it directly either by id or a class

    2 From what I see there is in fact margin top and margin bottom on both h1 and p tags in your statistics. You can select those tags by giving each paragraph and heading a class and then change your paragraphs margin-top to 0 and your headings margin-bottom to 0

    3 You don't need to space those tags with margin left and right, you can just use justify-content: space-evenly or justify-content: space-between

    4 You could also center text inside your statistics h1 and p tags with text-align: center;

    Marked as helpful

    0
  • Ignacio Spreafico• 590

    @nachospreafico

    Submitted

    I found really difficult to align the card to the center of the body for the desktop version, so the way I managed it is what I am most unsure of. Is it good practice to add display: grid to the body? Thanks in advance!

    QR Code Component

    3

    Aq1q• 220

    @Aq1q

    Posted

    It looks like display grid doesn't change how your body behaves, it does not center your component

    You could give it height of 100vh to take whole page, display it as flex, make it's direction column so that your footer stays at the bottom and justify it's content to the center, so your code would look something like this:

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

    This also makes paddings in your body, and both margins in your .card-container obsolete, because you already have it centered within body tag

    Marked as helpful

    0
  • Aq1q• 220

    @Aq1q

    Posted

    Hello There

    I have some things you could think while doing your future projects:

    -It seems that your solution is not really centered and it looks like your component overflows the page, you can fix that adding some style to your body tag, for example:

    display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;

    It makes your body tag take full device height, stops it from overflowing the page and centers your component vertically and horizontally

    I can also see you did not create style for mobile devices media queries are something that could help you with it

    Marked as helpful

    0