Skip to content
OverviewSolutions
4
Comments
4
Bartek20
@Bartek20

All comments

  • Niels•140
    @nielsfechtelSubmitted 4 months ago
    What are you most proud of, and what would you do differently next time?

    Persevered with heights and widths, when nothing seemed to make sense. Understand a little bit more now.

    What challenges did you encounter, and how did you overcome them?

    Please see section below and the readme.

    What specific areas of your project would you like help with?

    Difficulty scaling the container responsively and with how html-, body- and container-height interact (overflow, etc) on different device-sizes. Added media queries, that feel more like hacks, as I don't quite get why they are needed, yet. Please see the readme-section too.

    Recipe Challenge

    1
    Bartek20•120
    @Bartek20Posted 4 months ago

    Your solution looks good but there are some problems. You are missing margin on top and bottom which makes component look like it is cut. Maybe it's just me but on my pc entire page looks a little small (font). Spacing between section dividers is too small. Small tweak add width 50% on th and td in table to make them same width.

    Marked as helpful
    1
  • Bartek20•120
    @Bartek20Posted 4 months ago

    First of all, you should avoid using inline CSS in your index.html. Move it to a separate file. You should also try to center the profile component not by margin but by flex or grid. You can find an illustrated article here.. Also, think about changing spans in socials to anchor elements (a) they are links after all. In my personal opinion h3 is not the best element to add address information. It doesn't describe section of text it just adds some info. Maybe here span would work better.

    Marked as helpful
    0
  • innitman•130
    @innitmanSubmitted 4 months ago
    What are you most proud of, and what would you do differently next time?

    It was easier doing this the second time from Figma.

    What challenges did you encounter, and how did you overcome them?

    I couldn't work out how to make the font size change without media queries. I also found centering the card tricky; for some reason, this time : display grid with place-content: center didn't work on the .card-container. I had to use place-self: center on the .card itself.

    What specific areas of your project would you like help with?

    1. If .card-container is set to display: grid; and .card is a child of .card-container, place-content: center; did not work when width of .card was set to min(384px, 100%-48px). It seemed to calculate the larger width of the min options on desktop, use this to incorrectly center the content, and then shrink down to the smaller of the min options in terms of what it actually painted. Is this just an issue with using width: min(a,b) with grid children? I'm aware of minmax for the grid-columns, but am wondering if we can use plain old min for the grid children.

    2. Any help on how to make the font smaller without media queries as the front end mentor challenge suggested would be appreciated :)

    Blog

    2
    Bartek20•120
    @Bartek20Posted 4 months ago

    I think you should add min-width to .card to prevent text from overflowing. Also, you forgot to round the image. I was unable to replicate your problem, so no help from me... My personal opinion about img in that case, object-fit and height are unnecessary. Think about what would happen if that img showed a person and on a smaller screen size, you would only see the torso of that person (if the person is in the center of img) without object-fit, img gets scaled, not cut.

    Marked as helpful
    0
  • Bartek20•120
    @Bartek20Posted 4 months ago

    I see one thing in your solution that differs from design. Your title and description text has the same width as qr image. In design, the image is a little wider. But besides that, everything looks good.

    Marked as helpful
    0