Блог

Главная - Вопросы по программированию - Сделайте так, чтобы группа флип-боксов выровнялась на мобильном устройстве

Сделайте так, чтобы группа флип-боксов выровнялась на мобильном устройстве

#html #css #mobile

Вопрос:

На самом деле у меня нет никакого опыта работы с HTML или CSS. Я выяснял, как изменить существующие коды, чтобы помочь создать разделы веб-сайта. Единственная проблема в том, что я не могу сделать его удобным для мобильных устройств. Я создал код для создания 8 флип-боксов, которые работают, когда вы посещаете веб-сайт на компьютере. Однако они не так хорошо работают на мобильных устройствах. Я действительно не знаю, что я делаю, но могу ли я в любом случае выровнять 8 ящиков в одном столбце для мобильного использования и использовать прикосновение, чтобы заставить их перевернуться? Спасибо!

     <!DOCTYPE html>
<html>
<head>
<link href=https://fonts.googleapis.com/css?family=Montserrat:400,500,700,900|Ubuntu:400,500,700 rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
  font-family: 'Montserrat', sans-serif;
  font-weight: 300; /* black */
}
.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  justify-items: center;
  align-items: center;
  grid-gap: 8px;
}

.flip-card {
  background-color: transparent;
  width: 275px;
  height: 250px;
  perspective: 1000px;
}

.flip-card-inner {
  border-style: hidden;
  position: relative;
  width: 100%;
  height: 100%;
  text-align: left;
  transition: transform 0.6s;
  transform-style: preserve-3d;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}

.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card-front,
.flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}

.flip-card-front {
  background-color: white;
  color: #152939;
  text-align: center;
}

.flip-card-back {
  background-color: white;
  color: black;
  transform: rotateY(180deg);
  line-height: 1.25;
}

li{
    margin: 10px 0;
}

.vertical-center {
  margin: 0;
  position: absolute;
  top: 45%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}
</style>
</head>
<body>
<section id="team">
  <div class="container">
    <div class="grid">
      <!-- #stakeholder benefits -->
      <!-- #regulatory agencies -->

      <div class="flip-card">
        <div class="flip-card-inner">
          <div class="flip-card-front">
            <h2>Regulatory<br />Agencies</h2>
            <img src=https://i.ibb.co/t8ghC7J/Regulatory-Agencies.png alt="Regulatory-Agencies" width= "110">
          </div>
          <div class="flip-card-back">
               <div class="vertical-center">
            <ul>
            <br />
  <li style="font-size:15px;">Real-time monitoring amp; auditing</li>
  <li style="font-size:15px;">No need to go on-site to amp;ensp; review necessary paperwork</li>
  <li style="font-size:15px;">Access to digital database on contamination levels, origin and destination(s)</li>
</ul>
            </div>
          </div>
        </div>
      </div>

      <!-- #generators -->
      <div class="flip-card">
        <div class="flip-card-inner">
          <div class="flip-card-front">
            <h2>Generators<br /> amp;ensp; </h2>
            <img src=https://i.ibb.co/pj0M0cZ/Generator.png alt="Generator" width= "110">
          </div>
          <div class="flip-card-back">
            <div class="vertical-center">
            <ul>
            <br />
  <li style="font-size:15px;">Access to real-time project updates</li>
  <li style="font-size:15px;">Limit exposure to regulatory penalties</li>
  <li style="font-size:15px;">Accurately forecast and amp;ensp; reduce costs with start-to-finish project insights</li>
  <li style="font-size:15px;">Cost-effective</li>
            </div>
          </div>
        </div>
      </div>

      <!-- #environmental consultants -->
      <div class="flip-card">
        <div class="flip-card-inner">
          <div class="flip-card-front">
            <h2>Environmental Consultants</h2>
            <img src=https://i.ibb.co/wQsdBgk/Environmental-Consultants.png alt="Environmental-Consultants" width="110">
          </div>
          <div class="flip-card-back">
            <div class="vertical-center">
            <br />
           <ul>
   <li style="font-size:15px;">Easier vetting to review credentials of necessary companies</li>
  <li style="font-size:15px;">Single and centralized repository to access all amp;ensp; relevant documents</li>
</ul>
                                                </div>
          </div>
        </div>
      </div>

      <!-- #remediation consultants -->
      <div class="flip-card">
        <div class="flip-card-inner">
          <div class="flip-card-front">
            <h2>Certified Remediation Contractors</h2>
            <img src=https://i.ibb.co/tBczP7M/Certified-Remediation-Contractors.png alt="Certified-Remediation-Contractors" width= "100">
          </div>
          <div class="flip-card-back">
            <div class="vertical-center">
           <ul>
            <br />
   <li style="font-size:15px;">Digital manifests save time, space, energy and money</li>
  <li style="font-size:15px;">Improve trucker amp;ensp; management</li>
  <li style="font-size:15px;">Easily post jobs in need of additional compliant amp;ensp; amp;ensp; truckers</li>
</ul>
            </div>
          </div>
        </div>
      </div>
      
      <!-- #remediation professionals -->
      <div class="flip-card">
        <div class="flip-card-inner">
          <div class="flip-card-front">
            <h2>Remediation Professionals<br />(i.e. LSRPs)</h2>
            <img src=https://i.ibb.co/rm6KSMZ/Remediation-Professionals.png alt="Remediation-Professionals" width="100">
          </div>
          <div class="flip-card-back">
            <div class="vertical-center">
           <ul>
   <li style="font-size:15px;">Minimize paperwork by receiving necessary documents in the cloud</li>
  <li style="font-size:15px;">Streamlined updates to Regulatory Agencies</li>
</ul>
            </div>
          </div>
        </div>
      </div>

      <!-- #material truckers -->
      <div class="flip-card">
        <div class="flip-card-inner">
          <div class="flip-card-front">
            <h2>Material Truckers <br /> amp;ensp; </h2>
            <img src=https://i.ibb.co/xGdP24b/Truckers.png alt="Truckers" width= "120">
          </div>
          <div class="flip-card-back">
            <div class="vertical-center">
            <br />
          <ul>
<li style="font-size:15px;">Easier hiring process with ability to upload credentials and list references for new amp;ensp; jobs</li>
  <li style="font-size:15px;">Eliminates need to call for or save paper manifest receipts</li>
  <li style="font-size:15px;">Faster pay through direct invoicing</li>
  <li style="font-size:15px;">Post available trucks for hire</li>
  </ul>
            </div>
          </div>
        </div>
      </div>

      <!-- #disposal facilities -->
      <div class="flip-card">
        <div class="flip-card-inner">
          <div class="flip-card-front">
            <h2>Disposal Facilities <br /> amp;ensp; </h2>
            <img src=https://i.ibb.co/4KCPWxB/Disposal-Facilities.png alt="Disposal-Facilities" width="110">
          </div>
          <div class="flip-card-back">
            <div class="vertical-center">
            <br />
           <ul>
   <li style="font-size:15px;">Go green - no need to buy paper and printer cartridges amp;ensp; to print paper manifests</li>
  <li style="font-size:15px;">Easier manifest delivery - assign electronically to truckers ahead of time, no need to sign paper manifests at origin and destination</li>
</ul>
            </div>
          </div>
        </div>
      </div>
     
      <!-- #material testing labs -->
      <div class="flip-card">
        <div class="flip-card-inner">
          <div class="flip-card-front">
            <h2>Material Testing<br />Labs</h2>
            <img src=https://i.ibb.co/t8xWnfv/Material-Testing-Labs.png alt="Material-Testing-Labs" width="110">
          </div>
          <div class="flip-card-back">
            <div class="vertical-center">
           <ul>
            <br />
   <li style="font-size:15px;">Share results faster by integrating with TerraTrackr database</li>
   <li style="font-size:15px;">Upload testing lab results amp;ensp; and assign a unique project amp;ensp; ID for easy organization</li>
</ul>
            </div>
          </div>
        </div>
      </div>
</body>
</html>

Ответ №1:

Для того, чтобы он реагировал на запросы мобильных средств массовой информации: https://www.w3schools.com/css/css_rwd_mediaqueries.asp

Кроме того, наведение курсора на мобильном устройстве действует как сенсорный ввод, поэтому я не думаю, что у вас с этим проблемы

 <!DOCTYPE html>
<html>
<head>
<link href=https://fonts.googleapis.com/css?family=Montserrat:400,500,700,900|Ubuntu:400,500,700 rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
  font-family: 'Montserrat', sans-serif;
  font-weight: 300; /* black */
}
.grid {
  display: grid;
  width:auto;
  margin:0 auto;
  grid-template-columns: repeat(2, 1fr);
  justify-items: center;
  align-items: center;
  grid-gap: 8px;
}
@media only screen and (min-width: 768px){ /*Desktop*/
.grid {
  grid-template-columns: repeat(4, 1fr);
}
}

.flip-card {
  background-color: transparent;
  width: 275px;
  height: 250px;
  perspective: 1000px;
}

.flip-card-inner {
  border-style: hidden;
  position: relative;
  width: 100%;
  height: 100%;
  text-align: left;
  transition: transform 0.6s;
  transform-style: preserve-3d;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}

.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card-front,
.flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}

.flip-card-front {
  background-color: white;
  color: #152939;
  text-align: center;
}

.flip-card-back {
  background-color: white;
  color: black;
  transform: rotateY(180deg);
  line-height: 1.25;
}

li{
    margin: 10px 0;
}

.vertical-center {
  margin: 0;
  position: absolute;
  top: 45%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}
</style>
</head>
<body>
<section id="team">
  <div class="container">
    <div class="grid">
      <!-- #stakeholder benefits -->
      <!-- #regulatory agencies -->

      <div class="flip-card">
        <div class="flip-card-inner">
          <div class="flip-card-front">
            <h2>Regulatory<br />Agencies</h2>
            <img src=https://i.ibb.co/t8ghC7J/Regulatory-Agencies.png alt="Regulatory-Agencies" width= "110">
          </div>
          <div class="flip-card-back">
               <div class="vertical-center">
            <ul>
            <br />
  <li style="font-size:15px;">Real-time monitoring amp; auditing</li>
  <li style="font-size:15px;">No need to go on-site to amp;ensp; review necessary paperwork</li>
  <li style="font-size:15px;">Access to digital database on contamination levels, origin and destination(s)</li>
</ul>
            </div>
          </div>
        </div>
      </div>

      <!-- #generators -->
      <div class="flip-card">
        <div class="flip-card-inner">
          <div class="flip-card-front">
            <h2>Generators<br /> amp;ensp; </h2>
            <img src=https://i.ibb.co/pj0M0cZ/Generator.png alt="Generator" width= "110">
          </div>
          <div class="flip-card-back">
            <div class="vertical-center">
            <ul>
            <br />
  <li style="font-size:15px;">Access to real-time project updates</li>
  <li style="font-size:15px;">Limit exposure to regulatory penalties</li>
  <li style="font-size:15px;">Accurately forecast and amp;ensp; reduce costs with start-to-finish project insights</li>
  <li style="font-size:15px;">Cost-effective</li>
            </div>
          </div>
        </div>
      </div>

      <!-- #environmental consultants -->
      <div class="flip-card">
        <div class="flip-card-inner">
          <div class="flip-card-front">
            <h2>Environmental Consultants</h2>
            <img src=https://i.ibb.co/wQsdBgk/Environmental-Consultants.png alt="Environmental-Consultants" width="110">
          </div>
          <div class="flip-card-back">
            <div class="vertical-center">
            <br />
           <ul>
   <li style="font-size:15px;">Easier vetting to review credentials of necessary companies</li>
  <li style="font-size:15px;">Single and centralized repository to access all amp;ensp; relevant documents</li>
</ul>
                                                </div>
          </div>
        </div>
      </div>

      <!-- #remediation consultants -->
      <div class="flip-card">
        <div class="flip-card-inner">
          <div class="flip-card-front">
            <h2>Certified Remediation Contractors</h2>
            <img src=https://i.ibb.co/tBczP7M/Certified-Remediation-Contractors.png alt="Certified-Remediation-Contractors" width= "100">
          </div>
          <div class="flip-card-back">
            <div class="vertical-center">
           <ul>
            <br />
   <li style="font-size:15px;">Digital manifests save time, space, energy and money</li>
  <li style="font-size:15px;">Improve trucker amp;ensp; management</li>
  <li style="font-size:15px;">Easily post jobs in need of additional compliant amp;ensp; amp;ensp; truckers</li>
</ul>
            </div>
          </div>
        </div>
      </div>
      
      <!-- #remediation professionals -->
      <div class="flip-card">
        <div class="flip-card-inner">
          <div class="flip-card-front">
            <h2>Remediation Professionals<br />(i.e. LSRPs)</h2>
            <img src=https://i.ibb.co/rm6KSMZ/Remediation-Professionals.png alt="Remediation-Professionals" width="100">
          </div>
          <div class="flip-card-back">
            <div class="vertical-center">
           <ul>
   <li style="font-size:15px;">Minimize paperwork by receiving necessary documents in the cloud</li>
  <li style="font-size:15px;">Streamlined updates to Regulatory Agencies</li>
</ul>
            </div>
          </div>
        </div>
      </div>

      <!-- #material truckers -->
      <div class="flip-card">
        <div class="flip-card-inner">
          <div class="flip-card-front">
            <h2>Material Truckers <br /> amp;ensp; </h2>
            <img src=https://i.ibb.co/xGdP24b/Truckers.png alt="Truckers" width= "120">
          </div>
          <div class="flip-card-back">
            <div class="vertical-center">
            <br />
          <ul>
<li style="font-size:15px;">Easier hiring process with ability to upload credentials and list references for new amp;ensp; jobs</li>
  <li style="font-size:15px;">Eliminates need to call for or save paper manifest receipts</li>
  <li style="font-size:15px;">Faster pay through direct invoicing</li>
  <li style="font-size:15px;">Post available trucks for hire</li>
  </ul>
            </div>
          </div>
        </div>
      </div>

      <!-- #disposal facilities -->
      <div class="flip-card">
        <div class="flip-card-inner">
          <div class="flip-card-front">
            <h2>Disposal Facilities <br /> amp;ensp; </h2>
            <img src=https://i.ibb.co/4KCPWxB/Disposal-Facilities.png alt="Disposal-Facilities" width="110">
          </div>
          <div class="flip-card-back">
            <div class="vertical-center">
            <br />
           <ul>
   <li style="font-size:15px;">Go green - no need to buy paper and printer cartridges amp;ensp; to print paper manifests</li>
  <li style="font-size:15px;">Easier manifest delivery - assign electronically to truckers ahead of time, no need to sign paper manifests at origin and destination</li>
</ul>
            </div>
          </div>
        </div>
      </div>
     
      <!-- #material testing labs -->
      <div class="flip-card">
        <div class="flip-card-inner">
          <div class="flip-card-front">
            <h2>Material Testing<br />Labs</h2>
            <img src=https://i.ibb.co/t8xWnfv/Material-Testing-Labs.png alt="Material-Testing-Labs" width="110">
          </div>
          <div class="flip-card-back">
            <div class="vertical-center">
           <ul>
            <br />
   <li style="font-size:15px;">Share results faster by integrating with TerraTrackr database</li>
   <li style="font-size:15px;">Upload testing lab results amp;ensp; and assign a unique project amp;ensp; ID for easy organization</li>
</ul>
            </div>
          </div>
        </div>
      </div>
</body>
</html>

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

1. Большое вам спасибо!

Ответ №2:

Чтобы сделать его адаптивным для всех устройств, вы можете использовать свойство display flex.

Просто измените свой класс сетки, как показано ниже.

 .grid {
  align-items: center;
  flex-direction: row;
  display: flex;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}
Метки: ,