Блог

Главная - Вопросы по программированию - Попытка адаптивного оформления этой кнопки

Попытка адаптивного оформления этой кнопки

#html #css #responsive

#HTML #css #отзывчивый

Вопрос:

введите описание изображения здесь

Я пытаюсь адаптивно оформить эту кнопку, но я знаю, что у меня это плохо получается, потому что, когда я сжимаю или разворачиваю свой браузер, он либо ломается, либо текст смещается далеко вправо, и он не остается центрированным.

Я также считаю, что использую слишком много медиа-запросов, чем мне нужно, поэтому я считаю, что должен быть лучший способ создания этого.

Вот код, который у меня есть сейчас:

 .appt-btn-container {
  position: relative;
  display: inline-block;
  padding-right: 40px;
  background: #fa6304;
  width: 100%;
}

.appt-btn-container a {
  font-weight: 700;
}

.appt-btn-container:hover a {
  color: #ffffff;
}

.appt-btn {
  font-size: 35px;
  margin-left: 150px;
  line-height: 117px;
  border-radius: 0;
  color: #ffffff;
  text-transform: uppercase;
}

.appt-btn-container .calendar-icon {
  background: #d35302;
  position: absolute;
  padding: 26px 20px 25px 22px;
}

.appt-btn-container .calendar-icon .calendar-icon-arrow {
  width: 0;
  height: 0;
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
  border-left: 15px solid #d35302;
  display: inline-block;
  position: absolute;
  top: 38px;
  right: -14px;
}

 @media (min-width:1200px) and (max-width:1350px) {
    .appt-btn {
       font-size: 22px;
    }
 }

@media (min-width:1351px) and (max-width:1480px) {
   .appt-btn {
      font-size: 26px;
      margin-left: 175px;
   }
 }

 @media (min-width:1481px) and (max-width:1625px) {
    .appt-btn {
       font-size: 29px;
    }
 }

@media (min-width:1626px) and (max-width:1775px) {
   .appt-btn {
     font-size: 33px;
   }
}

@media (min-width:1700px) {
   .appt-btn {
      margin-left: 180px;
   }
}

@media (min-width:1776px) {
   .appt-btn {
      font-size: 35px;
   }
}  
 <div class="appt-btn-container">
  <span class="calendar-icon">
    <img class="img-responsive" src="https://flying-saucer.s3.amazonaws.com/calendar-icon-white-1.jpeg">
    <span class="calendar-icon-arrow"></span>
  </span>
  <a href="/contact-us/" class="appt-btn">
    Call For Free Estimate
  </a>
</div>

Комментарии:

1. вы согласны с реструктуризацией HTML? не могли бы вы указать полный путь к изображению, чтобы мы могли с ним работать?

2. самым простым решением было бы указать .appt-btn-container минимальную ширину до такой степени, чтобы она не прерывалась.

3. @tacoshy я добавил png, который я соскреб с Интернета для быстрого использования, поэтому он выглядит не идеально, но я думаю, что он подойдет для этих целей. Спасибо за помощь. Я попробую подход с минимальной шириной