Article Preview Component

Community feedback

• 

  P

  Ben 🌌•570

  @bengeraPosted 3 months ago

  Hello endriusssantos.

  To position the share card so it doesn't move when the screen or browser size changes, you can position the share-btn relative to something else. For example, create a container around the share-btn , give the container relative positioning and put the share card (and triangle) inside the container. This way, when the screen changes, the share card will stay relative to the container class.

  HTML

     <div class="button-container"> 
                          <div id="message" class="message how show">
                              <p class="text">share</p>
                              <a class="icon" href="#"><i class="fa-brands fa-square-facebook"></i></a>
                              <a href="#" class="icon"><i class="fa-brands fa-x-twitter"></i></a>
                              <a href="#" class="icon"><i class="fa-brands fa-pinterest"></i></a>
                              <div id="triangle" class="triangle show"></div>
                          </div>
                          
                          <button id="button" class="share-btn"><img src="./src/images/icon-share.svg" alt="share icon"
                              class="icon-btn"></button>
                      </div> 
                      
                  </div>
                      
  

  CSS

  /*Added*/
  .button-container {
      
      position: relative;
    }
  
  .container .card .content .message.show {
      opacity: 1;
  
       /*Added*/
       top: -74px;
       left: -109px;
  }
  
  .triangle {
      width: 0;
      height: 0;
      border-left: 15px solid transparent;
      border-right: 15px solid transparent;
      border-top: 15px solid hsl(217, 19%, 35%);
      position: absolute;
      opacity: 0;
  
      /*Changed*/
      top: 53px;
      right: 114px;
      
  }
  

  Hope this helps 👍

  Marked as helpful

  1

  ---

  

  endriusssantos•280

  @endriusssantosPosted 3 months ago

  Thanks for the tip @bengera :)

  0