Bootstrap 4 Disposición Edición Firefox OK/NO Chrome

Pregunta hecha: hace 8 meses Ultima actividad: hace 8 meses
up 0 down

Por lo tanto, tengo esta parte del código y funciona perfectamente bien en Firefox pero en Chrome u Opera el diseño es completamente roto, puede manchar a nadie lo que estoy haciendo mal aquí?

<div class="row broadband-block">
    <div class="col-12 col-sm-8 offset-sm-2 offset-lg-3 d-flex justify-content-center flex-column broadband-main ">
        <div class="row pb-4 d-flex justify-content-center justify-content-sm-start">
            <picture>
                <source media="(max-width: 576px)"
                        srcset="/img/[email protected]">
                <source media="(max-width: 1200px)"
                        srcset="/img/[email protected]">
                <source media="(min-width: 1201px)"
                        srcset="/img/[email protected]">
                <img class="img-fluid" src="~/img/[email protected]" alt="broadband-icon">
            </picture>
            <h2 class="electricity-header">Broadband</h2>
        </div>

        <h3 class="electricity-title">We offer tailored Broadband solutions to suit your business needs</h3>
        <p class="electricity-text">
            We pride ourselves on the quality of our products and award-winning customer service. We understand how important
            the internet is to keep your business running smoothly. Benefit from high speed and consistently reliable connectivity
            with speeds of up to 24mb. Great value cost-effective business broadband with a range of packages designed to give
            you the flexibility to grow.<br /><br />

            Whether you are a sole trader, a small to medium business or a large organisation, we have the package to suit you.<br /><br />

            Not sure which solution is right for your business? Call one of our advisors
            today on <span class="voice-number-color">#######</span>
        </p>
        <div class="col-12 col-sm-8 d-flex justify-content-center justify-content-sm-start landing-page-buttons">
            <button type="button" aria-expanded="false" aria-controls="more-1" class="btn toggle-content voice-buttons">
                <span class="text">CONTACT US</span>
            </button>
        </div>
    </div>
</div>

///////// CSS /////////

.broadband-main {
    padding-top: 50px;

    @include for-phone {
        padding-top: 20px;
        padding-left: 30px;
    }
}

1 respuesta

up 0 down

La clase d-flex hace que la página (y el botón) para mostrar de forma incorrecta en Chrome, pero no afecta a Firefox, Safari y otros navegadores. Tomando eso, la página se muestra ahora correctamente en todos los navegadores.

Aquí está la CSS:

.broadband-main {
    padding-top: 50px;

    @include for-phone {
        padding-top: 20px;
        padding-left: 30px;
    }
}

Y aquí está el código HTML:

<div class="row broadband-block container">
    <div class="col-12 col-sm-8 offset-sm-2 offset-lg-3 justify-content-center flex-column broadband-main ">
        <div class="row pb-4 d-flex justify-content-center justify-content-sm-start">
            <picture>
                <source media="(max-width: 576px)"
                        srcset="/img/[email protected]">
                <source media="(max-width: 1200px)"
                        srcset="/img/[email protected]">
                <source media="(min-width: 1201px)"
                        srcset="/img/[email protected]">
                <img class="img-fluid" src="~/img/[email protected]" alt="broadband-icon">
            </picture>
            <h2 class="electricity-header">Broadband</h2>
        </div>

        <h3 class="electricity-title">We offer tailored Broadband solutions to suit your business needs</h3>
        <p class="electricity-text">
            We pride ourselves on the quality of our products and award-winning customer service. We understand how important
            the internet is to keep your business running smoothly. Benefit from high speed and consistently reliable connectivity
            with speeds of up to 24mb. Great value cost-effective business broadband with a range of packages designed to give
            you the flexibility to grow.<br /><br />

            Whether you are a sole trader, a small to medium business or a large organisation, we have the package to suit you.<br /><br />

            Not sure which solution is right for your business? Call one of our advisors
            today on <span class="voice-number-color">#######</span>
        </p>
        <div class="col-12 col-sm-8 justify-content-center justify-content-sm-start landing-page-buttons">
            <button type="button" aria-expanded="false" aria-controls="more-1" class="btn toggle-content voice-buttons">
                <span class="text">CONTACT US</span>
            </button>
        </div>
    </div>
</div>