CSS Responsive table - problem with height - html

Question

few weeks ago I saw a simple, interesting list on codepen but unfortunately it was not resposnive.
I try to make that list responsive on my site for friend.
http://damianobajtek.pl/LandingAdamv2/ (Menu -> services).
I cannot resolve problem with height with media queries. I know that my div is too small (100vh) but what should I do to make it responsive?
Probably the simplest solution could be flexbox but I have a problem to remake that list on flexbox.
Thanks in advance for any advice :)

Answer 1

Changes here:
.second_services .content {
/* float: left; */
width: 100%;
height: 100%;
display: flex;
flex-wrap: wrap;
flex: 1 1 100%;
margin: 0;
padding: 0;
}
.second_services .content li {
/* float: left; */
border-bottom: 1px solid #2c2c2c;
border-left: 1px solid #2c2c2c;
/* width: 33.2%; */
flex: 1 1 calc(100% / 3);
box-sizing: border-box;
height: 25%;
position: relative;
display: flex;
flex-wrap: wrap;
/* Colors Hover */
}
#media (max-width: 1024px) {
.second_services .content li {
/* width: 50%; */
flex-basis: calc(100% / 2);
}
}
/* STYLE FOR SERVICES */
.second_services html,
.second_services body,
.second_services div,
.second_services h1,
.second_services h2,
.second_services h3,
.second_services h4,
.second_services h5,
.second_services h6,
.second_services p,
.second_services ol,
.second_services ul,
.second_services li,
.second_services footer,
.second_services header,
.second_services hgroup,
.second_services menu,
.second_services nav,
{
margin: 0;
padding: 0;
border: 0;
font: inherit;
font-size: 100%;
vertical-align: baseline;
}
.second_services html {
line-height: 1;
}
.second_services ol,
ul {
list-style: none;
}
.second_services table {
border-collapse: collapse;
border-spacing: 0;
}
.second_services caption,
th,
td {
text-align: left;
font-weight: normal;
vertical-align: middle;
}
.second_services q,
.second_services blockquote {
quotes: none;
}
.second_services q:before,
.second_services q:after,
.second_services blockquote:before,
.second_services blockquote:after {
content: "";
content: none;
}
.second_services a img {
border: none;
}
.second_services article,
.second_services aside,
.second_services details,
.second_services figcaption,
.second_services figure,
.second_services footer,
.second_services header,
.second_services hgroup,
.second_services menu,
.second_services nav,
.second_services section,
.second_services summary {
display: block;
}
/**
*
* Animate.css
* From : https://daneden.me/animate/
*
**/
.second_services .animated {
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
-ms-animation-fill-mode: both;
-o-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-duration: 1s;
-moz-animation-duration: 1s;
-ms-animation-duration: 1s;
-o-animation-duration: 1s;
animation-duration: 1s;
}
.second_services .animated.hinge {
-webkit-animation-duration: 2s;
-moz-animation-duration: 2s;
-ms-animation-duration: 2s;
-o-animation-duration: 2s;
animation-duration: 2s;
}
#-webkit-keyframes bounceIn {
0% {
opacity: 0;
-webkit-transform: scale(0.3);
}
50% {
opacity: 1;
-webkit-transform: scale(1.05);
}
70% {
-webkit-transform: scale(0.9);
}
100% {
-webkit-transform: scale(1);
}
}
#-moz-keyframes bounceIn {
0% {
opacity: 0;
-moz-transform: scale(0.3);
}
50% {
opacity: 1;
-moz-transform: scale(1.05);
}
70% {
-moz-transform: scale(0.9);
}
100% {
-moz-transform: scale(1);
}
}
#-o-keyframes bounceIn {
0% {
opacity: 0;
-o-transform: scale(0.3);
}
50% {
opacity: 1;
-o-transform: scale(1.05);
}
70% {
-o-transform: scale(0.9);
}
100% {
-o-transform: scale(1);
}
}
#keyframes bounceIn {
0% {
opacity: 0;
transform: scale(0.3);
}
50% {
opacity: 1;
transform: scale(1.05);
}
70% {
transform: scale(0.9);
}
100% {
transform: scale(1);
}
}
.bounceIn {
-webkit-animation-name: bounceIn;
-moz-animation-name: bounceIn;
-o-animation-name: bounceIn;
animation-name: bounceIn;
}
#-webkit-keyframes bounceInUp {
0% {
opacity: 0;
-webkit-transform: translateY(2000px);
}
60% {
opacity: 1;
-webkit-transform: translateY(-30px);
}
80% {
-webkit-transform: translateY(10px);
}
100% {
-webkit-transform: translateY(0);
}
}
#-moz-keyframes bounceInUp {
0% {
opacity: 0;
-moz-transform: translateY(2000px);
}
60% {
opacity: 1;
-moz-transform: translateY(-30px);
}
80% {
-moz-transform: translateY(10px);
}
100% {
-moz-transform: translateY(0);
}
}
#-o-keyframes bounceInUp {
0% {
opacity: 0;
-o-transform: translateY(2000px);
}
60% {
opacity: 1;
-o-transform: translateY(-30px);
}
80% {
-o-transform: translateY(10px);
}
100% {
-o-transform: translateY(0);
}
}
#keyframes bounceInUp {
0% {
opacity: 0;
transform: translateY(2000px);
}
60% {
opacity: 1;
transform: translateY(-30px);
}
80% {
transform: translateY(10px);
}
100% {
transform: translateY(0);
}
}
.second_services .bounceInUp {
-webkit-animation-name: bounceInUp;
-moz-animation-name: bounceInUp;
-o-animation-name: bounceInUp;
animation-name: bounceInUp;
}
#-webkit-keyframes bounceInDown {
0% {
opacity: 0;
-webkit-transform: translateY(-2000px);
}
60% {
opacity: 1;
-webkit-transform: translateY(30px);
}
80% {
-webkit-transform: translateY(-10px);
}
100% {
-webkit-transform: translateY(0);
}
}
#-moz-keyframes bounceInDown {
0% {
opacity: 0;
-moz-transform: translateY(-2000px);
}
60% {
opacity: 1;
-moz-transform: translateY(30px);
}
80% {
-moz-transform: translateY(-10px);
}
100% {
-moz-transform: translateY(0);
}
}
#-o-keyframes bounceInDown {
0% {
opacity: 0;
-o-transform: translateY(-2000px);
}
60% {
opacity: 1;
-o-transform: translateY(30px);
}
80% {
-o-transform: translateY(-10px);
}
100% {
-o-transform: translateY(0);
}
}
#keyframes bounceInDown {
0% {
opacity: 0;
transform: translateY(-2000px);
}
60% {
opacity: 1;
transform: translateY(30px);
}
80% {
transform: translateY(-10px);
}
100% {
transform: translateY(0);
}
}
.second_services .bounceInDown {
-webkit-animation-name: bounceInDown;
-moz-animation-name: bounceInDown;
-o-animation-name: bounceInDown;
animation-name: bounceInDown;
}
#-webkit-keyframes bounceInLeft {
0% {
opacity: 0;
-webkit-transform: translateX(-2000px);
}
60% {
opacity: 1;
-webkit-transform: translateX(30px);
}
80% {
-webkit-transform: translateX(-10px);
}
100% {
-webkit-transform: translateX(0);
}
}
#-moz-keyframes bounceInLeft {
0% {
opacity: 0;
-moz-transform: translateX(-2000px);
}
60% {
opacity: 1;
-moz-transform: translateX(30px);
}
80% {
-moz-transform: translateX(-10px);
}
100% {
-moz-transform: translateX(0);
}
}
#-o-keyframes bounceInLeft {
0% {
opacity: 0;
-o-transform: translateX(-2000px);
}
60% {
opacity: 1;
-o-transform: translateX(30px);
}
80% {
-o-transform: translateX(-10px);
}
100% {
-o-transform: translateX(0);
}
}
#keyframes bounceInLeft {
0% {
opacity: 0;
transform: translateX(-2000px);
}
60% {
opacity: 1;
transform: translateX(30px);
}
80% {
transform: translateX(-10px);
}
100% {
transform: translateX(0);
}
}
.second_services .bounceInLeft {
-webkit-animation-name: bounceInLeft;
-moz-animation-name: bounceInLeft;
-o-animation-name: bounceInLeft;
animation-name: bounceInLeft;
}
#-webkit-keyframes bounceInRight {
0% {
opacity: 0;
-webkit-transform: translateX(2000px);
}
60% {
opacity: 1;
-webkit-transform: translateX(-30px);
}
80% {
-webkit-transform: translateX(10px);
}
100% {
-webkit-transform: translateX(0);
}
}
#-moz-keyframes bounceInRight {
0% {
opacity: 0;
-moz-transform: translateX(2000px);
}
60% {
opacity: 1;
-moz-transform: translateX(-30px);
}
80% {
-moz-transform: translateX(10px);
}
100% {
-moz-transform: translateX(0);
}
}
#-o-keyframes bounceInRight {
0% {
opacity: 0;
-o-transform: translateX(2000px);
}
60% {
opacity: 1;
-o-transform: translateX(-30px);
}
80% {
-o-transform: translateX(10px);
}
100% {
-o-transform: translateX(0);
}
}
#keyframes bounceInRight {
0% {
opacity: 0;
transform: translateX(2000px);
}
60% {
opacity: 1;
transform: translateX(-30px);
}
80% {
transform: translateX(10px);
}
100% {
transform: translateX(0);
}
}
.second_services .bounceInRight {
-webkit-animation-name: bounceInRight;
-moz-animation-name: bounceInRight;
-o-animation-name: bounceInRight;
animation-name: bounceInRight;
}
#-webkit-keyframes rotateIn {
0% {
-webkit-transform-origin: center center;
-webkit-transform: rotate(-200deg);
opacity: 0;
}
100% {
-webkit-transform-origin: center center;
-webkit-transform: rotate(0);
opacity: 1;
}
}
#-moz-keyframes rotateIn {
0% {
-moz-transform-origin: center center;
-moz-transform: rotate(-200deg);
opacity: 0;
}
100% {
-moz-transform-origin: center center;
-moz-transform: rotate(0);
opacity: 1;
}
}
#-o-keyframes rotateIn {
0% {
-o-transform-origin: center center;
-o-transform: rotate(-200deg);
opacity: 0;
}
100% {
-o-transform-origin: center center;
-o-transform: rotate(0);
opacity: 1;
}
}
#keyframes rotateIn {
0% {
transform-origin: center center;
transform: rotate(-200deg);
opacity: 0;
}
100% {
transform-origin: center center;
transform: rotate(0);
opacity: 1;
}
}
.rotateIn {
-webkit-animation-name: rotateIn;
-moz-animation-name: rotateIn;
-o-animation-name: rotateIn;
animation-name: rotateIn;
}
#-webkit-keyframes rotateInUpLeft {
0% {
-webkit-transform-origin: left bottom;
-webkit-transform: rotate(90deg);
opacity: 0;
}
100% {
-webkit-transform-origin: left bottom;
-webkit-transform: rotate(0);
opacity: 1;
}
}
#-moz-keyframes rotateInUpLeft {
0% {
-moz-transform-origin: left bottom;
-moz-transform: rotate(90deg);
opacity: 0;
}
100% {
-moz-transform-origin: left bottom;
-moz-transform: rotate(0);
opacity: 1;
}
}
#-o-keyframes rotateInUpLeft {
0% {
-o-transform-origin: left bottom;
-o-transform: rotate(90deg);
opacity: 0;
}
100% {
-o-transform-origin: left bottom;
-o-transform: rotate(0);
opacity: 1;
}
}
#keyframes rotateInUpLeft {
0% {
transform-origin: left bottom;
transform: rotate(90deg);
opacity: 0;
}
100% {
transform-origin: left bottom;
transform: rotate(0);
opacity: 1;
}
}
.second_services .rotateInUpLeft {
-webkit-animation-name: rotateInUpLeft;
-moz-animation-name: rotateInUpLeft;
-o-animation-name: rotateInUpLeft;
animation-name: rotateInUpLeft;
}
#-webkit-keyframes rotateInDownLeft {
0% {
-webkit-transform-origin: left bottom;
-webkit-transform: rotate(-90deg);
opacity: 0;
}
100% {
-webkit-transform-origin: left bottom;
-webkit-transform: rotate(0);
opacity: 1;
}
}
#-moz-keyframes rotateInDownLeft {
0% {
-moz-transform-origin: left bottom;
-moz-transform: rotate(-90deg);
opacity: 0;
}
100% {
-moz-transform-origin: left bottom;
-moz-transform: rotate(0);
opacity: 1;
}
}
#-o-keyframes rotateInDownLeft {
0% {
-o-transform-origin: left bottom;
-o-transform: rotate(-90deg);
opacity: 0;
}
100% {
-o-transform-origin: left bottom;
-o-transform: rotate(0);
opacity: 1;
}
}
#keyframes rotateInDownLeft {
0% {
transform-origin: left bottom;
transform: rotate(-90deg);
opacity: 0;
}
100% {
transform-origin: left bottom;
transform: rotate(0);
opacity: 1;
}
}
.second_services .rotateInDownLeft {
-webkit-animation-name: rotateInDownLeft;
-moz-animation-name: rotateInDownLeft;
-o-animation-name: rotateInDownLeft;
animation-name: rotateInDownLeft;
}
#-webkit-keyframes rotateInUpRight {
0% {
-webkit-transform-origin: right bottom;
-webkit-transform: rotate(-90deg);
opacity: 0;
}
100% {
-webkit-transform-origin: right bottom;
-webkit-transform: rotate(0);
opacity: 1;
}
}
#-moz-keyframes rotateInUpRight {
0% {
-moz-transform-origin: right bottom;
-moz-transform: rotate(-90deg);
opacity: 0;
}
100% {
-moz-transform-origin: right bottom;
-moz-transform: rotate(0);
opacity: 1;
}
}
#-o-keyframes rotateInUpRight {
0% {
-o-transform-origin: right bottom;
-o-transform: rotate(-90deg);
opacity: 0;
}
100% {
-o-transform-origin: right bottom;
-o-transform: rotate(0);
opacity: 1;
}
}
#keyframes rotateInUpRight {
0% {
transform-origin: right bottom;
transform: rotate(-90deg);
opacity: 0;
}
100% {
transform-origin: right bottom;
transform: rotate(0);
opacity: 1;
}
}
.second_services .rotateInUpRight {
-webkit-animation-name: rotateInUpRight;
-moz-animation-name: rotateInUpRight;
-o-animation-name: rotateInUpRight;
animation-name: rotateInUpRight;
}
#-webkit-keyframes rotateInDownRight {
0% {
-webkit-transform-origin: right bottom;
-webkit-transform: rotate(90deg);
opacity: 0;
}
100% {
-webkit-transform-origin: right bottom;
-webkit-transform: rotate(0);
opacity: 1;
}
}
#-moz-keyframes rotateInDownRight {
0% {
-moz-transform-origin: right bottom;
-moz-transform: rotate(90deg);
opacity: 0;
}
100% {
-moz-transform-origin: right bottom;
-moz-transform: rotate(0);
opacity: 1;
}
}
#-o-keyframes rotateInDownRight {
0% {
-o-transform-origin: right bottom;
-o-transform: rotate(90deg);
opacity: 0;
}
100% {
-o-transform-origin: right bottom;
-o-transform: rotate(0);
opacity: 1;
}
}
#keyframes rotateInDownRight {
0% {
transform-origin: right bottom;
transform: rotate(90deg);
opacity: 0;
}
100% {
transform-origin: right bottom;
transform: rotate(0);
opacity: 1;
}
}
.second_services .rotateInDownRight {
-webkit-animation-name: rotateInDownRight;
-moz-animation-name: rotateInDownRight;
-o-animation-name: rotateInDownRight;
animation-name: rotateInDownRight;
}
.second_services {
background: #31486f;
/* fallback for old browsers */
color: #fff;
font-family: 'Oswald', sans-serif;
}
/**
*
* Responsive list
*
**/
.second_services {
margin: 0;
padding: 0;
border: 0;
font: inherit;
font-size: 100%;
vertical-align: baseline;
height: 100vh;
}
.second_services .responsive {
width: 100%;
height: 100%;
display: flex;
}
.second_services .content {
width: 100%;
height: 100%;
display: flex;
flex-wrap: wrap;
flex: 1 1 100%;
margin: 0;
padding: 0;
}
.second_services .content img {
width: 100%;
height: 101%;
}
.second_services .content li {
border-bottom: 1px solid #2c2c2c;
border-left: 1px solid #2c2c2c;
flex: 1 1 calc(100% / 3);
box-sizing: border-box;
height: 25%;
position: relative;
display: flex;
flex-wrap: wrap;
/* Colors Hover */
}
.content li:hover {
cursor: pointer;
}
.content li:hover .card-front {
-webkit-transform: rotateX(50deg);
-moz-transform: rotateX(50deg);
-ms-transform: rotateX(50deg);
-o-transform: rotateX(50deg);
transform: rotateX(50deg);
-webkit-transform: perspective(1000) rotateX(50deg);
-moz-transform: perspective(1000) rotateX(50deg);
-ms-transform: perspective(1000) rotateX(50deg);
-o-transform: perspective(1000) rotateX(50deg);
transform: perspective(1000) rotateX(50deg);
}
.content li:hover .card-back {
z-index: 950;
-webkit-transform: rotateX(0deg);
-moz-transform: rotateX(0deg);
-ms-transform: rotateX(0deg);
-o-transform: rotateX(0deg);
transform: rotateX(0deg);
-webkit-transform: perspective(1000) rotateX(0deg);
-moz-transform: perspective(1000) rotateX(0deg);
-ms-transform: perspective(1000) rotateX(0deg);
-o-transform: perspective(1000) rotateX(0deg);
transform: perspective(1000) rotateX(0deg);
}
.content li:nth-child(n) .card-back {
background: #bea34d;
}
.content li:nth-child(1) h2,
.content li:nth-child(2) h2,
.content li:nth-child(3) h2 {
padding-top: 30px;
}
.content .card-front,
.content .card-back {
text-align: right;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transition: -webkit-transform 400ms;
-moz-transition: -moz-transform 400ms;
-o-transition: -o-transform 400ms;
transition: transform 400ms;
display: block;
height: 100%;
position: absolute;
width: 100%;
}
.content .card-front {
-webkit-transform: perspective(1000) rotateX(0);
-moz-transform: perspective(1000) rotateX(0);
-ms-transform: perspective(1000) rotateX(0);
-o-transform: perspective(1000) rotateX(0);
transform: perspective(1000) rotateX(0);
z-index: 900;
}
.content .card-back {
-webkit-transform: rotateX(-180deg);
-moz-transform: rotateX(-180deg);
-ms-transform: rotateX(-180deg);
-o-transform: rotateX(-180deg);
transform: rotateX(-180deg);
z-index: 800;
}
.content h2 {
font-size: 2vw;
;
float: right;
width: 100%;
margin-bottom: 10px;
text-transform: uppercase;
margin-right: 20px;
margin-top: 20px;
color: #ffffff;
}
.content h2 b {
float: right;
width: 100%;
}
.content p {
line-height: 1.3em;
color: white;
width: 90%;
float: right;
margin-right: 20px;
}
.second_services .close {
cursor: pointer;
position: absolute;
right: 0;
top: 0;
background: #fff;
color: #111;
text-decoration: none;
font-size: 20px;
padding: 10px 20px;
background-color: #31486f;
color: #ffffff;
opacity: 1;
font-weight: 100;
padding-top: 3%;
}
.second_services .active {
width: 100% !important;
height: 100% !important;
}
.active .all-content {
position: absolute;
left: 10px;
top: 20px;
margin-left: 5%;
margin-right: 5%;
margin-top: 5%;
}
.active .all-content h1 {
font-size: 20px;
width: 100%;
color: #ffffff;
}
/*
#media (min-width: 1366px)
{
.second_services .close {
margin-top: 3%;
}
}
#media (min-width: 440px) and (max-width: 750px) {
.second_services .content h2 {
font-size: 22px;
}
.second_services .content p {
font-size: 13px;
}
.second_services .content li {
width: 33.1%;
}
}
#media (max-width: 439px) {
.second_services .content h2 {
font-size: 15px;
}
.second_services .content p {
font-size: 13px;
}
.second_services .content li {
width: 33%;
}
}
#media (max-height: 450px) {
.second_services .content h2 {
font-size: 22px;
}
.second_services .content h2 b {
width: 100%;
}
.second_services .content li {
width: 33%;
}
}
*/
#media (max-width: 1024px) {
.content p {
font-size: 13px;
}
.second_services .content li {
flex-basis: calc(100% / 2);
}
}
#media (max-width: 439px) {
.content h2 {
font-size: 5vw;
}
.second_services .content p {
font-size: 13px;
}
.second_services .content li {
width: 100%;
}
}
<div class="second_services" id="second_services">
<div class="responsive">
<ul class="content">
<li>
<div class="card-front">
<h2><b>One front</b></h2>
</div>
<div class="card-back">
<h2><b>One back</b></h2>
</div>
<!-- Content -->
<div class="all-content" style="display: none;">
<h1>Pomagamy na każdym etapie prowadzenia działalności. Doradzamy przy wyborze formy prawnej, załatwiamy wszystkie formalności związane z utworzeniem i rejestracją nowego podmiotu, pomagamy zorganizować Twoją działalność w zgodzie z obowiązującym
prawem.<br><br> Na kolejnym etapie dbamy o Twój komfort i bezpieczeństwo zapewniając skuteczne rozwiązania prawne dostosowane do Twoich potrzeb. Wykwalifikowany i doświadczony zespół pozwoli Ci zająć się tym co dla Ciebie najważniejsze - rozwijaniem
swojej działalności, bez potrzeby obawiania się o konsekwencje prawne swoich biznesowych decyzji.</h1>
</div>
</li>
<li>
<div class="card-front">
<h2><b>Two front</b></h2>
</div>
<div class="card-back">
<h2><b>Two back</b></h2>
</div>
<!-- Content -->
<div class="all-content" style="display: none;">
<h1>Prawo rodzinne</h1>
</div>
</li>
<li>
<div class="card-front">
<h2><b>Three front</b></h2>
</div>
<div class="card-back">
<h2><b>Three back</b></h2>
</div>
<!-- Content -->
<div class="all-content" style="display: none;">
<h1>In vulputate sem a arcu semper</h1>
</div>
</li>
<!-- 2 -->
<li>
<div class="card-front">
<h2><b>Four front</b></h2>
</div>
<div class="card-back">
<h2><b>Four back</b></h2>
</div>
<!-- Content -->
<div class="all-content" style="display: none;">
<h1>Etiam quis sapien interdum</h1>
</div>
</li>
<li>
<div class="card-front">
<h2><b>Five front</b></h2>
</div>
<div class="card-back">
<h2><b>Five back</b></h2>
</div>
<!-- Content -->
<div class="all-content" style="display: none;">
<h1>Vivamus metus massa</h1>
</div>
</li>
<li>
<div class="card-front">
<h2><b>Six front</b></h2>
</div>
<div class="card-back">
<h2><b>Six back</b></h2>
</div>
<!-- Content -->
<div class="all-content" style="display: none;">
<h1>Integer consequat vitae</h1>
</div>
</li>
<!-- 3 -->
<li>
<div class="card-front">
<h2><b>Seven front</b></h2>
</div>
<div class="card-back">
<h2><b>Seven back</b></h2>
</div>
<!-- Content -->
<div class="all-content" style="display: none;">
<h1>Duis tellus dui vehicula</h1>
</div>
</li>
<li>
<div class="card-front">
<h2><b>Eight front</b></h2>
</div>
<div class="card-back">
<h2><b>Eight back</b></h2>
</div>
<!-- Content -->
<div class="all-content" style="display: none;">
<h1>Ligula nulla tempus sem</h1>
</div>
</li>
<li>
<div class="card-front">
<h2><b>Nine fron</b></h2>
</div>
<div class="card-back">
<h2><b>Nine back</b></h2>
</div>
<!-- Content -->
<div class="all-content" style="display: none;">
<h1>Class aptent taciti sociosqu</h1>
</div>
</li>
<li>
<div class="card-front">
<h2><b>Ten front</b></h2>
</div>
<div class="card-back">
<h2><b>Ten back</b></h2>
</div>
<!-- Content -->
<div class="all-content" style="display: none;">
<h1>Class aptent taciti sociosqu</h1>
</div>
</li>
<li>
<div class="card-front">
<h2><b>Eleven front</b></h2>
</div>
<div class="card-back">
<h2><b>Eleven back</b></h2>
</div>
<!-- Content -->
<div class="all-content" style="display: none;">
<h1>Class aptent taciti sociosqu</h1>
</div>
</li>
<li>
<div class="card-front">
<h2><b>Twelve front</b></h2>
</div>
<div class="card-back">
<h2><b>Twelve back</b></h2>
</div>
<!-- Content -->
<div class="all-content" style="display: none;">
<h1>Class aptent taciti sociosqu</h1>
</div>
</li>
</ul>
</div>
</div>

Answer 2

Try to not mix flexbox with floats. You could also consider grid layout. Keeping your current html structure, I would do the following for minimal changes (see comments in css):
#second_services div.second_services {
margin: 0;
padding: 0;
border: 0;
font: inherit;
font-size: 100%;
vertical-align: baseline;
/* height: 100vh; Remove this*/
background: #31486f;
color: #fff;
}
.second_services .content {
/* float: left; Remove this */
width: 100%;
height: 100%;
/* Add the following three lines */
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.second_services .content li {
/* float: left; Remove this */
border-bottom: 1px solid #2c2c2c;
border-left: 1px solid #2c2c2c;
width: 33.2%;
height: 250px; /* Define a height: Could be with media queries */
position: relative;
display: flex;
flex-wrap: wrap;
}