[ad_1]How the actual site render
Basically, after all the struggling, I got the preview to look exactly what I want structure wise. The image should be bigger but will worried about it later. This new home page is created using “raw html” however majority of the page is created using elementor. (boss decision)
As you can see how the actual site render is quite different from the preview render
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home</title>
<style>
body, html {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
font-family: 'Haboro Contrast', sans-serif;
}
/* Reset spacing for p, br, and title elements */
p, br, title {
margin: 0;
padding: 0;
line-height: 0;
font-size: 0;
}
.main-container {
display: flex;
height: 100vh;
width: 100vw;
}
.section-container {
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
padding: 20px;
box-sizing: border-box;
}
.image-wrapper {
flex-grow: 1;
display: flex;
align-items: center;
justify-content: center;
}
.image-container {
width: 100%;
max-width: 276px;
height: 400px;
overflow: hidden;
}
.product-image {
width: 100%;
height: 100%;
object-fit: cover;
}
.section-text {
font-size: 32px;
font-weight: 800;
text-transform: uppercase;
line-height: 41.60px;
word-wrap: break-word;
text-align: center;
margin-top: 20px;
}
.structural-steel {
background: black;
color: white;
}
.steel-framing {
background: white;
color: black;
}
.architectural-panels {
background: #D8202B;
color: white;
}
@media (max-width: 768px) {
.main-container {
flex-direction: column;
height: auto;
}
.section-container {
min-height: 100vh;
}
.image-container {
max-width: 100%;
height: 300px;
}
}
</style>
</head>
<body>
<div class="main-container">
<div class="section-container structural-steel">
<div class="image-wrapper">
<a href="https://projectdmc.org/structural-steel/" class="image-container">
<img class="product-image" src="https://projectdmc.org/wp-content/uploads/2024/08/StructuralSteel.png" alt="Structural Steel">
</a>
</div>
<div class="section-text">Structural Steel</div>
</div>
<div class="section-container steel-framing">
<div class="image-wrapper">
<a href="https://projectdmc.org/steelframing-new/" class="image-container">
<img class="product-image" src="https://projectdmc.org/wp-content/uploads/2024/08/SteelFraming.png" alt="Steel Framing">
</a>
</div>
<div class="section-text">Steel Framing</div>
</div>
<div class="section-container architectural-panels">
<div class="image-wrapper">
<a href="https://projectdmc.org/architecturalpanels/" class="image-container">
<img class="product-image" src="https://projectdmc.org/wp-content/uploads/2024/08/ArchitecturalPanels.png" alt="Architectural Panels">
</a>
</div>
<div class="section-text">Architectural Panels</div>
</div>
</div>
</body>
</html>My guess is the problem is caused by elementor keeps injecting <p> element
The page I need help with: [log in to see the link]