Responsive, mobile first, CSS flexbox, Javascript Vanilla,

Community feedback

• 

  P

  Vishika•360

  @VishikaPosted 4 months ago

  Great job with adding the object-fit: cover and getting the your share box to float above! Adding a psuedo element to it can help give it that speech bubble look

  .boxShare::after {
      content: "";
      height: 1rem;
      width: 1rem;
      background-color: var(--veryDarkGrayishBlue);
      box-shadow: -0.5rem 0.5rem 0.5rem rgba(0, 0, 0, 0.2);
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translate(-50%, 50%) rotate(-45deg);
  

  I also noticed that in mobile view there is some margin missing from a couple elements

  The top of Michelles portrait peeps up from the share box in mobile view because the div is a little bit taller than the boxShare. I got around this by stacking both in the same grid-area, which made the share box exactly as tall as the profile div

  Marked as helpful

  0