Soporte » Diseño – Temas y plantillas » modificar bloque wp-cover por css

  • Resuelto germanv456

    (@germanv456)


    Hola buenas tardes
    en la pagina de inicio tengo un bloque gutenberg wp-cover, en el tengo un encabezado h2 que corresponde a las letras Li de ra, estoy intentando modificar este h2 para conseguir que en dispositivos moviles se vea pequeño y de forma horizontal, ahora mismo me sale con fuente enorme . Lo hago con mediaqueries, y desde css adicional(trabajo con tema child) y desde un plugin editor de css dentro del bloque, y de ninguna de las maneras me cambia el font-size del encabezado, me cambia el margin-left, y el witdh solamente, pero la fuente no.
    Aqui pongo dos codigos los del editor css y los del css personalizado

    @media only screen and (max-width: 600px) {
      .has-text-align-right eplus-xUYnNs {    
        
         margin-left:50px;
        font-size:50px;
        width:50%;
      }
    }
    @media only screen and (max-width: 600px) {
      selector {
        
        
      }
      selector h2  {
        margin-left:50px;
        font-size:50px;
        width:50%;
      }
    }
    En definitiva que lo que quiero es hacer la fuente más pequeñña en dispositivos moviles y tablets

    Gracias
    Saludos

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

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

    (@almendron)

    Añade !important:

    font-size:50px !important;

    Iniciador del debate germanv456

    (@germanv456)

    Hola Almendron
    gracias por tu respuesta, efectivamente haciendo esto me funciona con una mediaquery
    hasta max-width: 600px, pero si pongo:
    `@media only screen and (min-width: 600px) and (max-width:1200) {

    selector h2 {
    font-size: 60px!important;
    margin-left:50px;

    width:100%;}
    }`
    entonces aquí la fuente no cambia de tamaño, se queda igual, que tendría que hacer?
    gracias
    Saludos

    Moderador almendron

    (@almendron)

    Esto funciona:

    .wp-block-cover__inner-container h2 {
    	font-size: 50px !important;
    }

    Luego ya la pones para los distintos dispositivos.

    Iniciador del debate germanv456

    (@germanv456)

    Hola
    no acabo de entenderlo, ahora en la página a resolución de pantalla de pc tengo el font-size del h2 del block-cover a 210px, y este tamaño lo quiero conservar.
    tendria que poner aquí 250px !important; y despues en las mediaqueries, ir reduciendo el tamaño del font-size a 50px o a otra cantidad? para que no se vea tan grande?
    merci

    Moderador almendron

    (@almendron)

    El 250 déjalo como está.

    Lo de !important tienes que poner lo en las @media para que coja el nuevo valor en lugar del 250px.

    @media only screen and (max-width: 600px) {
    
    .wp-block-cover__inner-container h2 {
    	font-size: 50px !important;
    }
    
    }

    Fíjate en que hay un espacio entre 50px e !important, que alguún ejemplo que has puesto salen pegados.

    Iniciador del debate germanv456

    (@germanv456)

    Ok perfecto, me funciona todo
    muchas gracias

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