Bloque Fondo no acepta ancho completo ni se centra en la pantalla

  • M. A. G.

    (@magmlinares)


    hace 2 años, 1 mes

    Hola.

    He planteado este problema en el foro específico del tema que estoy utilizando (https://wordpress.org/support/topic/block-does-not-take-up-the-full-width-and-it-is-also-not-displayed-centered/) pero la moderadora del mismo se niega a ayudarme con la excusa de que mi web experimental no tiene SSL, como si así fuese a meterle un virus o algo.

    En el tema Twenty Twenty Two que he instalado en un WordPress temporal para aprender, he puesto un bloque Fondo de ancho completo. Pero no sale completo, ni puedo centrarlo, inconveniente que no sé cómo resolver. ¿Cómo puedo arreglar esto?

    Sé que podría resolverse con CSS, pero me extraña mucho que un tema supuestamente ágil y sencillo no te permita centrar un bloque fondo y te oblige a tirar de código.

    Gracias de antemano.

    • Este debate fue modificado hace 2 años, 1 mes por jose64. Razón: Mover al foro correspondiente

    La página con la que necesito ayuda: [accede para ver el enlace]

Viendo 4 respuestas - de la 1 a la 4 (de un total de 4)
  • Moderador jose64

    (@jose64)

    hace 2 años, 1 mes

    Hola.

    Entiendo tanto tu postura como la de la moderadora (no implica que esté de acuerdo o en desacuerdo), pero ten en cuenta que tú sabes lo que no vas a hacer pero ella solo ve el mensaje. Con esto te quiero decir que no te lo tomes a mal.

    Acabo de hacer una prueba y tienes CSS añadido que modifica el original del tema, por eso es que no te funciona correctamente. Como te indican en el foro del tema el bloque de fondo se puede configurar para que se vea en ancho amplio y completo, pero tienes una clase coveranchocompleto que modifica el CSS, elimina todo el CSS adicional que tengas añadido al tema y cualquier clase que tengas en los bloques, debería funcionarte sin problema.

    Comenta si tienes alguna duda y, por favor, recuerda marcar el debate como resuelto cuando así sea, de esta forma nos ayudas a mantener el foro al día.

    Iniciador del debate M. A. G.

    (@magmlinares)

    hace 2 años, 1 mes

    Hola, Jose Luis.

    Ante todo, gracias por tu amable respuesta.

    En realidad, añadí esa clase coveranchocompleto en uno de los múltiples intentos de arreglar esto y, aunque no conseguí solucionarlo, se me olvidó quitarlo después.

    Pero, siguiendo tus indicaciones, acabo de retirarlo y sigo teniendo la misma incidencia. Así que no tengo ni idea de por dónde puede venir esta historia.

    Moderador jose64

    (@jose64)

    hace 2 años, 1 mes

    También hay algunas instrucciones en el CSS que están forzadas con important!, aparte de que tienes forzado el ancho máximo a 1022px:

    .wp-block-post-content > * {
    max-width: 1022px !important;
}

    Añadiste al final del archivo style.css del tema este código:

    /* Aumentar la anchura del contenido en páginas y entradas - 14/oct/2022 */
.wp-block-post-content > * {
    max-width: 1022px !important;
}

/* El bloque cover ocupaba solo media pantalla y no salía centrado
Aprendido aquí: https://wordpress.org/support/topic/cover-block-full-width-2/  */

/*
.coveranchocompleto{
    min-width: 112%;
}
*/

/* Efecto zoom al hover de una imagen https://www.miguelmanchego.com/2015/crear-efecto-de-zoom-al-hover-de-una-imagen-con-css/ */

.efectozoomhover img {
-webkit-transition:all .9s ease; /* Safari y Chrome */
-moz-transition:all .9s ease; /* Firefox */
-o-transition:all .9s ease; /* IE 9 */
-ms-transition:all .9s ease; /* Opera */
width:100%;
}
.efectozoomhover:hover img {
-webkit-transform:scale(1.25);
-moz-transform:scale(1.25);
-ms-transform:scale(1.25);
-o-transform:scale(1.25);
transform:scale(1.25);
}
.efectozoomhover {/*Ancho y altura son modificables al requerimiento de cada uno*/
width:300px;
height:180px;
overflow:hidden;
}

    Nunca debes modificar o añadir nada al tema, la razón: cuando actualices el tema tu código va a desaparecer, para eso tienes el CSS adicional o crear un tema hijo.

    Elimina ese código, o mejor aún elimina el tema y vuelve a descargarlo para tenerlo limpio, una vez hecho esto verás que no hay ningún problema con el bloque si configuras todo correctamente.

    Iniciador del debate M. A. G.

    (@magmlinares)

    hace 2 años, 1 mes

    Re-hola, José Luis. Gracias de nuevo.

    He comprobado que tenías razón, y que era concretamente este código el que influía en la malformación del Bloque Fondo:

    .wp-block-post-content > * {
    max-width: 1022px !important;
}

    Así que, basándome en tus consejos, he eliminado toooodo el código adicional que le había puesto y he dejado el tema limpio como estaba al principio.

    He instalado un plugin llamado «Child Theme Configurator» y he creado un tema hijo. Iba yo tan contento por estar haciendo las cosas bien, cuando me encuentro que, al activar el tema hijo, no aparecen ni la cabecera, ni el pie de página, ni la configuración del grid del blog. O sea, horas de trabajo.

    Regresando al tema original compruebo todo vuelve a su sitio. Entonces he pensado en exportar el tema padre para importarlo desde el tema hijo, pero no encontraba por ningún sitio la opción de importar. En el foro https://wordpress.org/support/topic/how-to-copy-templates-from-twenty-twenty-two-theme-to-child-theme/ he encontrado gente con mi misma problemática. Es decir, se pierden las partes de la plantilla que hayas hecho cuando creas un tema hijo, y la opción de importar se ve que no está nada trabajada aún.

    Así que, como no tengo tiempo de ponerme de nuevo a crear en el tema hijo la cabecera, grid de blog, y el pie,… y lo que falte… he optado por regresar al tema original y seguir trabajando en él añadiendo el CSS que vaya necesitando.

    Si ocurriese, como tú bien comentas, que al actualizar WordPress o el tema, se perdiera el código CSS adicional, tengo dicho CSS en un archivo aparte en mi ordenador. Aunque sea más chapucero, sería simplemente volver a añadirlo con un copiar/pegar.

    Supongo que si el plugin hiciera bien el tema hijo, o si hubiese una buena opción de importar, esto no resultaría tan jaleoso.

Viendo 4 respuestas - de la 1 a la 4 (de un total de 4)
  • El debate ‘Bloque Fondo no acepta ancho completo ni se centra en la pantalla’ está cerrado a nuevas respuestas.