Issue with HTML code
Hi!
I'm trying to build a custom structure of containers with text and a flip-over effect on hover displaying more text, you can see it here when scrolling: http://test.dinascience.com/index.php/soluciones/
I'm doing it with HTML code, and I'm facing some issues I don't know how to fix. Mainly:
- I would like the yellow boxes to be all the same size on the flip front (right now the second one is smaller, as the text is shorter)
- I would like the yellow boxes to not be overlapped with the following white boxes and to maintain the 10px gap between the boxes.
Each column is a block of html code. Here's the code I'm currently using (1st column as an example):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ES Endometrial Solution Column</title>
<style>
/* Column Container */
.column-container {
width: 100%;
display: flex;
flex-direction: column;
gap: 10px;
}
/* Flip Container */
.flip-container {
width: 100%;
min-height: 85px;
perspective: 1000px;
text-decoration: none !important; /* No underline */
}
}
.large-box {
min-height: 100px ; /* Default for top box */
}
/* Flip Inner */
.flip-inner {
width: 100%;
min-height: inherit;
position: relative;
transform-style: preserve-3d;
transition: transform 0.5s ease-in-out, min-height 0.5s ease-in-out;
cursor: pointer;
}
/* Flip Sides */
.flip-front, .flip-back {
position: absolute;
width: 100%;
min-height: inherit;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
backface-visibility: hidden;
padding: 10px;
box-sizing: border-box;
border-radius: 0px;
}
/* Flip Effect */
.flip-container:hover .flip-inner {
transform: rotateY(180deg);
min-height: auto; /* Allows the box to expand */
}
/* Large Box (Top) */
.large-box .flip-front {
background-color: #fcf53c;
color: #38406A;
font-family: "Beatrice regular", sans-serif;
}
.large-box .flip-back {
background-color: #38406A;
color: #ffffff;
font-family: "GT Cinetype light", sans-serif;
transform: rotateY(180deg);
}
.large-box h4 {
font-size: 15px;
margin: 0;
}
.large-box p {
margin: 0;
}
/* Small Boxes (Below) */
.small-box .flip-front {
background-color: #ffffff;
color: #38406A;
font-family: "Beatrice regular", sans-serif;
}
.small-box .flip-back {
background-color: #38406A;
color: #ffffff;
font-family: "GT Cinetype light", sans-serif;
transform: rotateY(180deg);
}
.small-box h5 {
font-size: 15px;
margin: 0;
}
.small-box p {
margin: 0;
}
/* Expanding Effect */
.flip-container:hover .flip-back {
position: relative;
min-height: auto; /* Expands to fit content */
padding: 15px;
}
/* Clickable Link (No Underline) */
.flip-container a {
text-decoration: none;
color: inherit; /* Keeps text color */
display: block; /* Makes entire box clickable */
width: 100%;
height: 100%;
}
.flip-back a {
text-decoration: none !important; /* Ensures no underline */
display: contents; /* Prevents affecting layout */
}
/* Font Sizes and Line Heights (Responsive) */
@media (min-width: 1025px) { /* Desktop */
.large-box h4, .small-box h5, .large-box p, .small-box p { font-size: 15px; line-height: 21px; }
}
@media (max-width: 1024px) { /* Laptop */
.large-box h4, .small-box h5, .large-box p, .small-box p { font-size: 14px; line-height: 20px; }
}
@media (max-width: 768px) { /* Tablet */
.large-box h4, .small-box h5, .large-box p, .small-box p { font-size: 12px; line-height: 18px; }
}
@media (max-width: 480px) { /* Mobile */
.large-box h4, .small-box h5, .large-box p, .small-box p { font-size: 14px; line-height: 20px; }
}
</style>
</head>
<body>
<div class="column-container">
<!-- Large Box (Top) -->
<a href="http://test.dinascience.com/index.php/soluciones/endometrial-solution/" class="flip-container large-box">
<div class="flip-inner">
<div class="flip-front">
<h4>ES ENDOMETRIAL SOLUTION</h4>
</div>
<div class="flip-back">
<p>Optimización de las condiciones endometriales para mejorar el éxito de la implantación
</p>
</div>
</div>
</a>
<!-- Small Boxes (Below) -->
<a href="http://test.dinascience.com/index.php/soluciones/endometrial-solution/es-meta/" class="flip-container small-box">
<div class="flip-inner">
<div class="flip-front">
<h5>ES-Meta</h5>
</div>
<div class="flip-back">
<p>Estudio Funcional: Microbiome Expanded Typing Analysis</p>
</div>
</div>
</a>
<a href="http://test.dinascience.com/index.php/soluciones/endometrial-solution/es-y/" class="flip-container small-box">
<div class="flip-inner">
<div class="flip-front">
<h5>ES-Y</h5>
</div>
<div class="flip-back">
<p>Estudio Funcional: Análisis del estado Inmunológico </p>
</div>
</div>
</a>
<a href="http://test.dinascience.com/index.php/soluciones/endometrial-solution/es-time/" class="flip-container small-box">
<div class="flip-inner">
<div class="flip-front">
<h5>ES-Time</h5>
</div>
<div class="flip-back">
<p>Estudio de Receptividad:Test ventana de implantación</p>
</div>
</div>
</a>
</div>
</body>
</html>
Thank you so much for any help!
Comments
Hi,
We're sorry, but we did not test this script with the theme. Our policy states that we do not support third-party plugins or custom code, so we cannot help you.
You should contact your web developer instead.
Thanks