Fylo Data Storage Component

Community feedback

• 

  Elaine•11,400

  @elaineleungPosted almost 2 years ago

  Hi Agyemang, good job putting this together! For the triangle with the ::after pseudo element, instead of having just border: solid transparent, try specifying the sides, like this:

  .grid-item-3::after {
    top: 98%;
    right: 0; // remove left
    border-left: solid transparent;
    border-top: solid white;
    // rest of your code
  }
  

  Also, change the border-radius in .grid-item-3 to border-radius: 8px 8px 0 8px;, which should give you that sharp corner instead of a rounded one.

  With the media query, I'd choose a much higher breakpoint since right now when the layout changes, the sides are cut off. Also, there appears to be some overflow going on, and I think it may have to do with the large margins you're using (such as in .grid-item-3) to do positioning. I would actually suggest not having .grid-item-3 as a grid element but to have that as a child of .grid-item-2 instead, and I'd use position: absolute instead of using things like margin-left: 21rem, which is what I think is causing things to be pushed off to the right side of the screen.

  Hope this helps you out!

  0

  ---

  

  agyemang•100

  @Owura-56Posted almost 2 years ago

  @elaineleung thank you

  0