Make group of flip boxes align on mobile
I don't really have any background of HTML or CSS. I've been figuring out how to change existing codes to help make sections of a website. The only issue is that I can't make it mobile-friendly. I made a code to create 8 flip boxes that work when you visit the website on a computer. However, they don't work so well on mobile. I don't really know what I'm doing, but is there anyway I can align the 8 boxes in one column for mobile use and use touch to make them flip? Thanks!
<!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   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 />   </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   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   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   management</li>
<li style="font-size:15px;">Easily post jobs in need of additional compliant     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 />   </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   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 />   </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   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   and assign a unique project   ID for easy organization</li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
from Recent Questions - Stack Overflow https://ift.tt/3ezJPFW
https://ift.tt/eA8V8J
Comments
Post a Comment