Social links profile | react, emotion, css custom properties

Community feedback

• 

  P

  Achi Gyuse Achi•150

  @AchigyusPosted 5 months ago

  Hi Florian.

  I love your submission, your attention for details is really nice. However I noticed something.

  1. On mobile, there are some gaps in the responsive design, I mean that some mobile screens don't have some padding between the edge of the screen and the social-links-card. You can check using your devtools and slowly resize down to see what I mean.

  2. On desktop screens, there are horizontal and vertical scroll bars, funny thing is they don't show while the devtools tab is active, so maybe that's how you missed it. I identified the culprit code:

  .css-13cezar {
      position: absolute;
      overflow: scroll;
      inset: 0px;
      min-width: 320px;
      min-height: 580px;
      width: 330px;
      height: 580px;
      margin: auto;
      border-radius: 1rem;
      background-color: var(--colors-darkgrey);
      display: flex;
      flex-direction: column;
      -webkit-box-pack: center;
      justify-content: center;
  }
  

  The overflow property on your main tag is set to scroll, you can set it to hidden or remove it to fix the issue.

  Kudos for your work once again.

  Marked as helpful

  1

  ---

  

  Florian Frosch•60

  @ffroschPosted 5 months ago

  Hi @Achigyus, thank you for the really helpful tips. Indeed I did not notice the scrollbars. The reason is that I use Firefox, which hides them in normal view, too. I changed it to overflow: auto.

  The missing margins were on purpose, but I realize that it can be nicer to have them on mobile, too. Will use them in the next project :-)

  1