Как поместить кнопку в правый нижний угол

Question

Сделал кнопку. Ее нужно поместить в правый нижний угол и сделать фиксированной. Кнопка эта будет располагаться на taplink (для мобильных устройств в браузере).
Я поместил ее в левый нижний угол и сделал фиксированной, но как сделать так, чтобы она менялась в зависимости от разрешения? Я делал для разрешения 400x800, но может же быть и 300х600 и она будет совершенно другого размера и т.д.

Код:

.wrapper {
        display: inline-flex;
      }

      .wrapper .icon {
        position: fixed;
        background-color: #AE978F;
        right: 0px;
        bottom: 0px;
        color: #ffffff;
        border-radius: 50%;
        padding: 15px;
        margin: 10px;
        width: 50px;
        height: 50px;
        font-size: 18px;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);
        cursor: pointer;
        transition: all 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55);
      }

      .wrapper .tooltip {
        position: absolute;
        top: 0;
        font-size: 14px;
        background-color: #ffffff;
        color: #ffffff;
        padding: 5px 8px;
        border-radius: 5px;
        box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);
        opacity: 0;
        pointer-events: none;
        transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
      }

      .wrapper .tooltip::before {
        position: absolute;
        content: "";
        height: 8px;
        width: 8px;
        background-color: #ffffff;
        bottom: -3px;
        left: 50%;
        transform: translate(-50%) rotate(45deg);
        transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
      }

      .wrapper .icon:hover .tooltip {
        top: -45px;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
      }

      .wrapper .icon:hover span,
      .wrapper .icon:hover .tooltip {
        text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.1);
      }

      .wrapper .whatsapp:hover,
      .wrapper .whatsapp:hover .tooltip,
      .wrapper .whatsapp:hover .tooltip::before {
        background-color: #43d854;
        color: #ffffff;
      }

<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <script src="https://kit.fontawesome.com/ec705a4d25.js" crossorigin="anonymous"></script>
  </head>
  <body>

    <div class="wrapper">
      <div class="icon whatsapp">
        <div class="tooltip">WhatsApp</div>
        <span><i class="fab fa-whatsapp fa-2x"></i></span>
      </div>
    </div>

  </body>
</html>

Answer 1

Используйте медиа запросы https://itchief.ru/lessons/html-and-css/css-media-queries Например для максимальной ширины устройства 300px используйте

@media (max-width: 300px) { /* Стили CSS ... */ }

БЛОГ НА HUSL

Как поместить кнопку в правый нижний угол

Ответы (1 шт):