Изменить размер div в медиа-запросе - PullRequest
Новая
       9

Изменить размер div в медиа-запросе

0 голосов
/ 18 мая 2018

Мне было очень трудно понять, почему это не работает.У меня есть эта кнопка, которая не будет переключаться на 100% ширину на мобильном телефоне.Это работает, когда я устанавливаю его в тег, но тогда моя анимация CSS при наведении не работает ...

Просто нужно выяснить, как заставить div занимать 100% экрана при размере мобильного телефона,( jsfiddle здесь , если вы предпочитаете использовать это) 

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title></title>
  <style>
    body {
      background-color: #FFA48A;
    }
    
    .btn {
      color: #fff;
      border: 2px solid #fff;
      border-radius: 0px;
      padding: 14px 26px;
      display: inline;
      font-family: Helvetica, Arial, sans-serif;
      font-size: 16px;
      letter-spacing: 1px;
      cursor: pointer;
      box-shadow: inset 0 0 0 0.01px #fff;
      -webkit-transition: ease-out 0.6s;
      -moz-transition: ease-out 0.6s;
      transition: ease-out 0.6s;
      margin-left: 100px;
    }
    
    .ctaSlide:hover {
      box-shadow: inset 400px 0 0 0 #fff;
      color: #000;
    }
    
    #ctaONE {
      text-align: center;
      margin-left: 100px;
      float: left;
    }
    
    @media only screen and (max-width: 700px) {
      .btn {
        width: 100%;
        margin: 0;
        color: #000
      }
    }
  </style>
</head>

<body>
  <div class="btnContainer">
    <div class="btn ctaSlide">Shop now</div>
  </div>
</body>

</html>

Ответы [ 4 ]

0 голосов
/ 18 мая 2018

Кнопка является встроенным элементом, на который which не будет оказывать никакого влияния.Чтобы избежать этого, добавьте display: inline-block; или block к своему правилу CSS в медиа-запросе.

(а также добавьте box-sizing: border-box;, чтобы предотвратить его выход из контейнера) 

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title></title>
  <style>
    body {
      background-color: #FFA48A;
    }
    
    .btn {
      color: #fff;
      border: 2px solid #fff;
      border-radius: 0px;
      padding: 14px 26px;
      display: inline;
      font-family: Helvetica, Arial, sans-serif;
      font-size: 16px;
      letter-spacing: 1px;
      cursor: pointer;
      box-shadow: inset 0 0 0 0.01px #fff;
      -webkit-transition: ease-out 0.6s;
      -moz-transition: ease-out 0.6s;
      transition: ease-out 0.6s;
      margin-left: 100px;
    }
    
    .ctaSlide:hover {
      box-shadow: inset 400px 0 0 0 #fff;
      color: #000;
    }
    
    #ctaONE {
      text-align: center;
      margin-left: 100px;
      float: left;
    }
    
    @media only screen and (max-width: 700px) {
      .btn {
        width: 100%;
        margin: 0;
        color: #000;
        display: inline-block;
        box-sizing: border-box;
      }
    }
  </style>
</head>

<body>
  <div class="btnContainer">
    <div class="btn ctaSlide">Shop now</div>
  </div>
</body>

</html>
0 голосов
/ 18 мая 2018

Попробуйте добавить

display:block;

к вашему медиа-запросу

При отображении элемента как встроенного, все свойства высоты и ширины не будут иметь эффекта.

0 голосов
/ 18 мая 2018

Отображение inline в вашем классе btn вызывает проблему.Также добавьте box-sizing: border-box для всех элементов. 

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title></title>
  <style>
    body {
      background-color: #FFA48A;
    }
    body * {
        box-sizing: border-box;
     }
    
    .btn {
      color: #fff;
      border: 2px solid #fff;
      border-radius: 0px;
      padding: 14px 26px;
      font-family: Helvetica, Arial, sans-serif;
      font-size: 16px;
      letter-spacing: 1px;
      cursor: pointer;
      display: inline;
      box-shadow: inset 0 0 0 0.01px #fff;
      -webkit-transition: ease-out 0.6s;
      -moz-transition: ease-out 0.6s;
      transition: ease-out 0.6s;
      margin-left: 100px;
    }
    
    .ctaSlide:hover {
      box-shadow: inset 400px 0 0 0 #fff;
      color: #000;
    }
    
    #ctaONE {
      text-align: center;
      margin-left: 100px;
      float: left;
    }
    
    @media only screen and (max-width: 700px) {
      .btn {
        display: block;
        width: 100%;
        margin: 0;
        color: #000
      }
    }
  </style>
</head>

<body>
  <div class="btnContainer">
    <div class="btn ctaSlide">Shop now</div>
  </div>
</body>

</html>
0 голосов
/ 18 мая 2018

Вы должны установить для кнопки css значение 

display: block;

в медиа-запросе.В противном случае 

display: inline;

сохранит его ширину 100%

...