Soporte » Diseño – Temas y plantillas » El tema Hestia no se modifica con el CSS adicional

  • Resuelto margaritamaria12

    (@margaritamaria12)


    Buen día.

    Estoy utilizando el tema Hestia.
    He tratado de disminuir el tamaño de la imagen principal, ya que en la versión móvil ocupa mucho espacio, he leído varios foros y utilizado código CSS en el personalizador CSS adicional, esto no ha funcionado ya que no encuentro ningún código con el cual pueda modificar el tamaño de la cabecera.
    Lo que me preocupa es que ahora en la parte de CSS adicional pego cualquier código para modificar, ya sea la opacidad en la cabecera u otra cosa, pero no se modifica nada.

    Soy principiante y agradecería mucho su ayuda!!
    Un saludo.

Viendo 15 respuestas - de la 1 a la 15 (de un total de 16)
  • Moderador almendron

    (@almendron)

    Si son reglas existentes, es necesario usar !important

    https://desarrolloweb.com/articulos/declaracion-important-css.html

    Anteriormente probé pegando un código para eliminar la opacidad de la cabecera y funcionó, después seguí investigando para saber cómo reducir el tamaño de la imagen de la cabecera y entré al editor del tema, no modifiqué nada porque no quise dañar el código del tema, solo lo miré para entenderlo un poco, sin embargo, desde que entré al editor de tema no me funciona ningún código que pego en el CSS adicional.

    Moderador almendron

    (@almendron)

    1) No hay relación alguna entre entrar al editor del tema y el funcionamiento del CSS adicional.

    2) ¿Has probado lo de !important ?

    • Esta respuesta fue modificada hace 3 semanas, 5 días por almendron.
    Moderador almendron

    (@almendron)

    Prueba, por ejemplo, a añadir:

    .navbar {
    font-size: 40px !important;
    }

    Esto debería aumentar el tamaño de la letra del menú superior.

    Ya lo probé pero no funciona, sigue sin hacerse ningún cambio.

    Moderador almendron

    (@almendron)

    1) Desactiva LiteSpeed Cache

    2) Añade de nuevo las líneas que te he indicado.

    3) Avisa cuando lo hayas hecho para echarle un vistazo.

    ya lo hice, pero sigue sin funcionar.

    Moderador almendron

    (@almendron)

    Ve a Apariencia > Personalizar > CSS adicional, copia lo que tienes allí puesto y lo pegas aquí.

    Moderador almendron

    (@almendron)

    Por cierto, hay una actualización de solo hace tres días.

    Esto es lo que tengo en el CSS adicional.

    @media (max-width: 768px) {
    .hestia-team .card .content .card-description {
    display: block;
    }

    Ya actualicé y el código de la opacidad se ve reflejado pero en la versión móvil y tablet, en el computador no.

    Moderador almendron

    (@almendron)

    El código te funciona perfectamente porque la regla que has puesto solo se ejecuta en ventanas inferiores a 768px.

    Por otro lado, te dije que añadieras para poder comprobar las siguientes líneas:

    .navbar {
    font-size: 40px !important;
    }

    pero veo que no lo has hecho.

    ese no era el código de opacidad, era para que se viera la descripción de los miembros de la sección Team en la versión móvil, por eso solo se ve en móvil, el código de opacidad, igual que las líneas que usted me dió las probé y como no funcionaron las eliminé.

    Volví a probar y esto es lo que tengo en mi CSS adicional:

    @media (max-width: 768px) {
    .hestia-team .card .content .card-description {
    display: block;
    }
    .header-filter:before {
    background-color: rgba(0, 0, 0, 0);
    }
    .navbar {
    font-size: 40px !important;
    }

    El primero es para lo de la descripción de los miembros del equipo, que funciona bien, el segundo es el de la opacidad, que solo se ve reflejado en la versión móvil y tablet y el último es el que usted me dió, que no se ve reflejado.

    Moderador almendron

    (@almendron)

    1) Todas las reglas que has puesto solo van a funcionar en pantallas inferiores a 768px.

    2) No has utilizado el elemento !important en las dos primera reglas.

    3) Además hay un error porque no has cerrado el elemento @media (max-width: 768px). Te falta } al final del todo.

    Elimina todo el código y deja solo

    .navbar {
    font-size: 40px !important;
    } 

    Por cierto, estoy dando por hecho que tu página es https://populach.com/
    ¿Es así?

    Ya eliminé todo y dejé solamente esas líneas, pero sigo sin ver el cambio :(.
    Sí, así es, mi págna es: https://populach.com/

Viendo 15 respuestas - de la 1 a la 15 (de un total de 16)
  • Debes estar registrado para responder a este debate.