damsman10

Latest comments

• 

  Manav•390

  @manav-sharma69

  Submitted about 1 year ago

  What challenges did you encounter, and how did you overcome them?

  Designing that share box (for desktop design) was something I did for the first time. It was challenging. Now it looks fairly simple. Although, it's a bit hacky 😅

  What specific areas of your project would you like help with?

  @media (min-width: 769px){
      ...
      .popup{
          justify-content: center;
          position: absolute;
          bottom: 90%;
          right: -2vw;
          left: 23vw;
          background-color: var(--very-dark-grayish-blue);
          padding: 1.25rem 2.5rem;
          border-radius: 10px;
      }
      .icon:hover{
          cursor: pointer;
      }
      button::before{
          display: var(--btnStyle);
          position: absolute;
          bottom: 80%;
          right: 7%;
          content: "";
          inline-size: 0;
          block-size: 0;
          border-top: 10px solid var(--very-dark-grayish-blue);
          border-inline: 10px solid transparent;
      }
  }
  
  @media (min-width: 920px){
      .popup{
          right: -4vw;
      }
  }
  
  @media (min-width: 1040px){
      .popup{
          right: -6vw;
      }
  }
  
  @media (min-width: 1080px){
      .popup{
          right: -20%;
          left: unset;
      }
  }
  

  This is styling I added to make that share box responsive. If there's a better way to design the component with shorter/better CSS, please share in the comments.

  

  Responsive Article Preview Component

  #accessibility#pure-css

  1

  10
  

  damsman10•10

  @damsman10

  Posted 12 months ago

  You did a good job, do well to keep practicing!

  1