Skip to content
OverviewSolutions
3
Comments
46
Alex
@al3xback

All comments

  • Alex•660
    @al3xbackPosted almost 3 years ago

    Hi Anosha,

    I think this structure is not well optimized when have long content. (https://prnt.sc/24lvdv1, https://prnt.sc/24lvvu0)

    Marked as helpful
    1
  • Alex•660
    @al3xbackPosted almost 3 years ago

    Hi Christopher,

    I think we dont need to add width 80% on .card class. Cos this will create empty space. Attached screenshot for a better view. (https://prnt.sc/24lspqh)

    0
  • Alex•660
    @al3xbackPosted almost 3 years ago

    Hi AleksandarV91,

    I see double scrollbar here, https://prnt.sc/24gxp6o

    Looks like there is a structure problem

    0
  • Alex•660
    @al3xbackPosted almost 3 years ago

    Hi Quincy,

    It would be good if we can set position: relative to each grid items, not in .Grid class. So this will lead to a better placement of the content.

    Marked as helpful
    0
  • Wildmarks Passos•140
    @Wildmarks-PassosSubmitted almost 3 years ago

    I noticed that in the original image of the challenge, in the color part -> #0c1729, there are some broken parts, does anyone know how I do this with CSS? I couldn't find anything relevant.

    HTML5, CSS3

    3
    Alex•660
    @al3xbackPosted almost 3 years ago

    Hi Wildmarks,

    I see that the color (#0c1729) is not working cos it's overridden by children's background-color (#15273f) on class contentContainer.

    The css concept is actually each children can overwrite/change the inherit value from the parent.

    Marked as helpful
    0
  • Alex•660
    @al3xbackPosted almost 3 years ago

    Hi Jane,

    When i tried to open on smaller desktop height, i could not scroll to see the overall content, looks like it's affected by overflow: hidden

    0
  • Alex•660
    @al3xbackPosted almost 3 years ago

    Hi Emiliano,

    For this case, it would be good if we use fixed value instead of percentage for max-width on container class. If we look on larger desktop or simply zoom out then we will see the difference.

    I would change to this:

    .container {
    max-width: 1200px;
    padding: 3% 5%;
    margin: 0 auto;
}
    Marked as helpful
    0
  • Alex•660
    @al3xbackPosted almost 3 years ago

    HI Mark,

    My feedback are as follows:

    • for class nft-photo, using flex properties is unnecessary cos we dont have content inside.
    • for class ETH and time, we dont need to use flex-direction: row as its default value for flex.
    • it's unnecessary to add color property on class line, it's alr handled by border.
    Marked as helpful
    0
  • Alex•660
    @al3xbackPosted almost 3 years ago

    Hi Achref,

    It would be good if we can move social and copyright to footer instead of section.

    Marked as helpful
    1
  • Alex•660
    @al3xbackPosted almost 3 years ago

    Hi Achref,

    By using place-content, behind the scene, we are adding special styles to grid-container (grid-template-columns: min-content; and grid-template-rows: min-content;) which make each grid-items shrinks so we can place them easily according to the value of place-content.

    Those additional styles won't work if we assign fraction unit value to grid-template-columns. Fraction unit provide grid-item the ability to occupy existing space (similar to grow in flex) and this will make grid-container difficult to manage position of grid-items.

    Hope this clear :)

    Marked as helpful
    1
  • Alex•660
    @al3xbackPosted almost 3 years ago

    Hi Achref,

    I think for this case we dont need to use place-items. This will break the layout if the grid-item doesn't have paragraph element. Attached screenshot for this case. (https://prnt.sc/23dredg)

    and for place-content, it doesnt have effect if we combine with fraction unit(fr) on grid-template-columns (cos usually only work for px or auto).

    Marked as helpful
    1
  • Alex•660
    @al3xbackPosted almost 3 years ago

    Hi AliAbuhumra,

    I would recommend using margin-top instead of translateY on .quotes__item, by using this will allows the parent's height equal to children height (including margin).

    0