Почему размер div не меняется?

Я работаю над флип-картой для своего личного портфолио. У меня есть блоки div определенного размера, и я хочу два в ряд, но они не будут иметь размер, который я установил, и четыре идут подряд вместо двух, которые я хочу. Вот весь мой код:

/* Whole Page */

body {
  margin: 0;
  text-align: center;
}


/* Nav */

nav {
  display: block;
  position: fixed;
  background-color: black;
  color: white;
  width: 100%;
  height: 10vh;
  border-bottom: solid white 1px;
}

.btns {
  display: inline-block;
  float: right;
  margin-top: -3.25%;
  font-family: sans-serif;
  width: 30vw;
}

button {
  background-color: black;
  border: none;
  color: white;
  display: inline-block;
  float: right;
  margin-right: 1%;
  margin-left: 1%;
  font-size: 22px;
  cursor: pointer;
}

#logo {
  margin-left: 3.5%;
  text-align: left;
}

/* Welcome Section */

#welcome-section {
  background-image: url(https://www.walldevil.com/wallpapers/a51/2755-city-cityscape-wallpaper-architecture-wallpapers-albums-skylines.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  height: 100vh;
  border-bottom: black 3px solid;
}

h1,
#welcome-section p {
  width: 50%;
  color: white;
  text-align: left;
  margin: auto;
  font-weight: 800;
}

h1 {
  font-size: 60px;
  padding-top: 25vh;
  font-family: sans-serif;
}

#welcome-section p {
  font-size: 27px;
  font-family: serif;
}

/* Portfolio */

#projects {
  width: 55vw;
  margin: auto;
}

#projects-h2 {
  font-size: 30px;
  text-decoration: underline;
}

.flip-card {
  width: 25vw;
  height: 25vh;
  margin: auto;
  position: relative;
  perspective: 100vw;
  float: left;
}

@media (min-width: 600px) and (max-width: 992px) {
  .flip-card {
    width: 31%;
    margin: 1.16%;
  }
}

@media (min-width: 992px) {
  .flip-card {
    width: 23%;
    margin: 1%;
  }
}

.flip-card .front,
.flip-card .back {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  background-size: cover;
  transition: 0.3s;
  backface-visibility: hidden;
  /* Change Colors! */
  border: solid 1px #333;
  box-shadow: 5px 10px 8px #333;
}

.flip-card:hover .front {
  transform: rotateY(180deg) scale(0.5);
}

.flip-card .back {
  /* Change Colors! */
  background: #333;
  color: #FFF;
  display: flex;
  justify-content: center;
  transform: rotateY(180deg) scale(0.5);
}

.flip-card:hover .back {
  transform: rotateY(360deg) scale(1);
}

.flip-card .front {
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

/* Contact */

<!DOCTYPE html>
<html lang = "en">

<head>
  <meta charset = "utf-8">
  <meta name = "viewport" content = "width=device-width, initial-scale=1.0">
  <!-- CSS -->
  <link rel = "stylesheet" href = "main.css">
  <!-- FreeCodeCamp Tests -->
  <script src = "https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
  <title>Jacob Pieczynski | Front-end Web Developer</title>
</head>

<body>
  <!-- Nav -->
  <nav id = "navbar">
    <h2 id = "logo">Jacob Pieczynski</h2>
    <div class = "btns">
      <a href = "#welcome-section"><button>Home</button></a>
      <a href = "#projects"><button>Projects</button></a>
      <a href = "#contact"><button>Contact</button></a>
    </div>
  </nav>
  <!-- Welcome Section -->
  <section id = "welcome-section">
    <h1>I am Jacob Pieczynski</h1>
    <p class = "h1-desc">An up and coming teen web developer</p>
  </section>
  <!-- Projects -->
  <section id = "projects">
    <h2 id = "projects-h2">Projects</h2>
    <!-- New Card -->
    <div class = "flip-card">
      <!-- Front -->
      <div class = "front" style = "background-image:url(https://i.imgur.com/ZmJVBHn.png)">

      </div>
      <!-- Back -->
      <div class = "back">
        <h2 class = "card-header">Loren Impus</h2>
      </div>
    </div>
    <!-- New Card -->
    <div class = "flip-card">
      <!-- Front -->
      <div class = "front" style = "background-image:url(https://i.imgur.com/ZmJVBHn.png)">

      </div>
      <!-- Back -->
      <div class = "back">
        <h2 class = "card-header">Loren Impus</h2>
      </div>
    </div>
    <!-- New Card -->
    <div class = "flip-card">
      <!-- Front -->
      <div class = "front" style = "background-image:url(https://i.imgur.com/ZmJVBHn.png)">

      </div>
      <!-- Back -->
      <div class = "back">
        <h2 class = "card-header">Loren Impus</h2>
      </div>
    </div>
    <!-- New Card -->
    <div class = "flip-card">
      <!-- Front -->
      <div class = "front" style = "background-image:url(https://i.imgur.com/ZmJVBHn.png)">

      </div>
      <!-- Back -->
      <div class = "back">
        <h2 class = "card-header">Loren Impus</h2>
      </div>
    </div>
    <!-- New Card -->
    <div class = "flip-card">
      <!-- Front -->
      <div class = "front" style = "background-image:url(https://i.imgur.com/ZmJVBHn.png)">

      </div>
      <!-- Back -->
      <div class = "back">
        <h2 class = "card-header">Loren Impus</h2>
      </div>
    </div>
    <!-- New Card -->
    <div class = "flip-card">
      <!-- Front -->
      <div class = "front" style = "background-image:url(https://i.imgur.com/ZmJVBHn.png)">

      </div>
      <!-- Back -->
      <div class = "back">
        <h2 class = "card-header">Loren Impus</h2>
      </div>
    </div>
  </section>
  <!-- Contact -->
  <section id = "contact">
    <!-- Contact Circle - Instagram -->
    <a href = "#" id = "contact-a">
      
    </a>
    <!-- Contact Circle - Email -->
    <a href = "#" id = "contact-a">
    
    </a>
    <!-- Contact Circle - FreeCodeCamp -->
    <a href = "#" id = "contact-a">
    
    </a>
    <!-- Contact Circle - Github -->
    <a href = "#" id = "contact-a">
    
    </a>
  </section>
  <!-- Footer -->
  <footer id = "footer">

  </footer>
</body>

</html>

Спасибо за помощь, так как это важный для меня проект, которым я очень разочарован на данный момент. Хорошего дня!

Проверьте свое правило для @media (min-width: 992px) - я думаю, вы хотите вместо этого max-width

— 15.07.2018 19:09

Даже без всего запроса он не будет работать должным образом, поэтому я не думаю, что это связано с медиа-запросом. Спасибо!

— 16.07.2018 02:54

html css

15.07.2018 18:40

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

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

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

Ответы 1

Похоже, это происходит потому, что вы переопределяете ширину, установленную с помощью медиа-запросов, например, у вас есть это:

.flip-card {
  width: 25vw;
  height: 25vh;
  margin: auto;
  position: relative;
  perspective: 100vw;
  float: left;
}

Тогда у вас есть это:

@media (min-width: 600px) and (max-width: 992px) {
  .flip-card {
    width: 31%;
    margin: 1.16%;
  }
}

@media (min-width: 992px) {
  .flip-card {
    width: 23%;
    margin: 1%;
  }
}

Каждая ширина в этих медиа-запросах переопределяет ваши 25vw, если вы удалите проценты ширины из каждого из этих медиа-запросов или измените ширину: от 23% до 48% ваши карточки перейдут в 2 для каждой строки. Ширина 23% говорит о том, что они составляют 23% от ширины контейнера, что составляет примерно 1/4 ширины, из-за чего они должны быть 4 в ряд.

04.04.2019 23:57

Другие вопросы по теме

При установке высоты img с помощью vp это влияет на ширину элемента sibling, но с% это не так, почему?

Как уменьшить скорость прокрутки фонового изображения

Как настроить тег переноса строки?

Safari отображает только правую половину полноэкранного div

Div, выходящий за пределы HTML и тела

H1 не будет использовать все доступное пространство, даже если и он, и его контейнер имеют гораздо большую ширину (HTML / CSS)

Список не перемещается с преобразованием

Стиль фонового изображения для встроенного изображения

Почему градиенты не отображаются на Heroku даже с префиксами поставщиков?

Как отобразить XML-код в div в HTML

Почему размер div не меняется?

Ответы 1

Другие вопросы по теме

Похожие вопросы