1

tengo un proyecto donde coloqué un código que html que saqué de otra página (https://www.gofundme.com/f/hope-for-little-ciro). A la hora de pegarlo arrastra como herencia en su body un background color blanco, el cual no logro quitar. He probado de diversas formas pero no logro comprender la especificidad o como pisar la clase si esta proviene de una url y de un archivo css externo. Les dejo mi html a ver si pueden ayudarme, el iframe está en el div class="gfm-embed"

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" href="img/carebro_redes.jpeg">
    <script src="https://kit.fontawesome.com/9b0bb3d5c8.js" crossorigin="anonymous"></script>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
    <link rel="stylesheet" href="css/style.css">
    <title>DONA AHORA</title>
</head>

<body>
    <header>
        <nav class="navbar navbar-expand-lg bg-dark bg-gradient text-white">
            <div class="container-fluid">
                <img class="logo" src=".//img/cirologo.png" alt="">
                <h1 class="h1_index">Todos con Ciro</h1>
                <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
                    data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false"
                    aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
                    <div class="navbar-nav">
                        <a class="nav-link active" aria-current="page" href=".//index.html">Inicio</a>
                        <a class="nav-link" href=".//canavan.html">Canavan</a>
                        <a class="nav-link" href="./galeria.html">Galeria</a>
                        <a class="nav-link" href=".//contactanos.html">Contactenos</a>
                        <a class="nav-link" href=".//donaahora.html">Dona ahora</a>
                    </div>
                </div>
            </div>
        </nav>
    </header>
    <!-- MAIN -->
    <main>
        <div class="donaahora">
            <div class="caja1">
                <h2 class="h2_donaahora">Entre todos podemos ayudar! <h2>
                        <P class="p_donaahora">Es una enfermedad que la padecen 1200 niños en todo el mundo, nuestro
                            proposito es que se conozca
                            y la mision poder ayudar a sustentar los requerimientos basicos que produce esta enfermedad.

                            <div class="gfm-embed"
                                data-url="https://www.gofundme.com/f/hope-for-little-ciro/widget/large/"> </div>
                            <script defer src="https://www.gofundme.com/static/js/embed.js"></script>


                            <div class="icons">
                                <a href="http://paypal.com" target="_blank"><img
                                        src="https://img.icons8.com/color/48/000000/paypal.png"></a></th>
                                <a href="http://mercadopago.com" target="_blank"><img
                                        src="https://img.icons8.com/color/48/000000/mercado-pago.png" /></a></th>
                                <a href="http://visa.com" target="_blank"><img
                                        src="https://img.icons8.com/color/48/000000/visa.png"></a>
                                <a href="http://mastercard.com" target="_blank"><img
                                        src="https://img.icons8.com/color/48/000000/mastercard.png" /></a>

                            </div>
            </div>
    </main>
    <!-- FOOTER -->
    <footer class="footer bg-light bg-dark bg-gradient text-white"">
        <div>
            <a href=" http://facebook.com" target="_blank"><i class="fa-brands fa-facebook"></i></a>
        <a href="https://www.instagram.com/ciro_lovato/" target="_blank"><i class="fa-brands fa-instagram"></i></a>
        <a href="http://twitter.com" target="_blank"><i class="fa-brands fa-twitter"></i></a>
        </div>
    </footer>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous">
    </script>
</body>

</html> ``

1 respuesta 1

2

Esto pasa porque por defecto viene ya un script que carga el banner desde otra ruta, solo debes colocar un div y nombrando una id o simplemente agregando un style, le cambias la dimensión horizontalmente para hacer el recuadro a un tamaño que desaparezca el fondo blanco.

Ejemplo:

<div style="width: 20rem;">
   <div class="gfm-embed"data-url="https://www.gofundme.com/f/hope-for-little-ciro/widget/large/"></div>
   <script defer src="https://www.gofundme.com/static/js/embed.js"></script>
</div>
                        

Luego debes agregarle un flex para colocarlo en el lugar que deseas de la web y listo.

Espero que esto te sirva un saludo.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.