使一组翻转框在移动设备上对齐

Question

我真的没有任何 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 & auditing</li>
  <li style="font-size:15px;">No need to go on-site to &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 /> &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 &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 &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 &ensp; management</li>
  <li style="font-size:15px;">Easily post jobs in need of additional compliant &ensp; &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 /> &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 &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 /> &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 &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 &ensp; and assign a unique project &ensp; ID for easy organization</li>
</ul>
            </div>
          </div>
        </div>
      </div>
</body>
</html>

Answer 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 & auditing</li>
  <li style="font-size:15px;">No need to go on-site to &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 /> &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 &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 &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 &ensp; management</li>
  <li style="font-size:15px;">Easily post jobs in need of additional compliant &ensp; &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 /> &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 &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 /> &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 &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 &ensp; and assign a unique project &ensp; ID for easy organization</li>
</ul>
            </div>
          </div>
        </div>
      </div>
</body>
</html>

Answer 2

为了使其响应所有设备，您可以使用 display flex 属性。

只需更改您的网格 class，如下所示。

.grid {
  align-items: center;
  flex-direction: row;
  display: flex;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}

使一组翻转框在移动设备上对齐

Make group of flip boxes align on mobile

html

css

mobile