CSS HTML

Community feedback

• 

  John Rey Faciolan•220

  @juani2

  Posted about 4 years ago

  Hello Nima,

  Nice work on the card component. Regarding the circles, you mean the two circles on the upper and bottom corner?

  Well, in my case those two circles took most of my time positioning them for all screen sizes, they were a real challenge for me.

  I looked at your code and observed you implemented those two circles using <img> tag and position them using absolute units. Maybe you can try to position your images using viewport units so that when screen size change, your images will change position relative to viewport.

  you check this snippet from my own solution:

  .profile-card-section {
      background-color: hsl(185, 75%, 39%);
      background-image: url('/images/bg-pattern-top.svg'), url('/images/bg-pattern-bottom.svg');
      background-repeat: no-repeat, no-repeat;
      background-size: contain, contain;
      background-position: top -35vh left -35vh, bottom -35vh right -35vh;
      display: flex;
      align-items: center;
  }
  

  In my case I implemented those two circles CSS background, and position those images using background-position on CSS the offset values were taken from dozen trials resizing the screen for mobile tablet and desktop view port which is a real pain.

  for my complete solution, you may also look at this link:

  my solution

  Hope this one helps. Thanks.

  20