Preview vs actual site

  • Resolved justanothertechbro

    (@justanothertechbro)


    2 months, 2 weeks ago

    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)

    View post on imgur.com
    View post on imgur.com
    How the actual site render

    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="/structural-steel/" class="image-container">
                        <img class="product-image" src="/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="/steelframing-new/" class="image-container">
                        <img class="product-image" src="/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="/architecturalpanels/" class="image-container">
                        <img class="product-image" src="/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]

Viewing 4 replies - 1 through 4 (of 4 total)
Viewing 4 replies - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.