Cómo ocultar el Tagline en móviles - Wordpress

  • Autor Autor TinyWay
  • Fecha de inicio Fecha de inicio
T

TinyWay

Gamma
Verificación en dos pasos activada
Verificado por Whatsapp
Buenas amigos, instalando un Theme en Wordpress me fijo que al navegar desde el móvil el Tagline o la Descripción corta del sitio molesta bastante, y me preguntaba si hay algún codigo CSS que permita deshabilitar el mensaje para móviles pero dejarlo en el Navegador.
Pongo como ejemplo a FB
header.webp
En mi caso, busco ocultar el mensaje "Somos betas,siempre mejoramos" desde el móvil pero que al acceder desde el PC si se vea:topsy_turvy:.
Gracias de antemano
 
Digamos que la clase del tagline es .tagline, simplemente haz lo siguiente:

Insertar CODE, HTML o PHP:
media only screen and (max-width: 1150px) 
{
.tagline {display: none;}
}

Donde pone: max-width: 1150px, debes poner en pixeles el ancho desde donde quieres que se oculte el tagline, y dentro de .tagline la etiqueta display: none lo eliminará.
 
Digamos que la clase del tagline es .tagline, simplemente haz lo siguiente:

Insertar CODE, HTML o PHP:
media only screen and (max-width: 1150px) 
{
.tagline {display: none;}
}

Donde pone: max-width: 1150px, debes poner en pixeles el ancho desde donde quieres que se oculte el tagline, y dentro de .tagline la etiqueta display: none lo eliminará.

Buenas diasprico, gracias por tu respuesta pero como seguramente habrás notado soy algo novatillo en el mundo de la programación jejeje. Supones que la clase es .tagline pero en el Theme que estoy usando no estoy seguro de cuál se trata o de como encontrarla. Básicamente he copiado el código que has escrito y lo he incorporado a la página usando la Personalizacion CSS que viene por defecto en Wordpress :fatigue:
 
Buenas diasprico, gracias por tu respuesta pero como seguramente habrás notado soy algo novatillo en el mundo de la programación jejeje. Supones que la clase es .tagline pero en el Theme que estoy usando no estoy seguro de cuál se trata o de como encontrarla. Básicamente he copiado el código que has escrito y lo he incorporado a la página usando la Personalizacion CSS que viene por defecto en Wordpress :fatigue:

Primero y antes que nada, dirígete a la descripción que quieres eliminar, luego click derecho e inspeccionar elemento para comprobar alguno de los casos siguientes.

La clase de un elemento se identifica como "class", así que supongamos que la estructura de tu cabecera es la siguiente.

Insertar CODE, HTML o PHP:
<header>
   <div class="logo">
      <a href="/" [B]class="imagen"[/B]><img src="logo.png"></a>
      <a href="/" [B]class="tagline"[/B]><p>Descripción larga y molesta en dispositivos móviles</p></a>
   </div>
</header>

De ser así, el código que te pasé con anterioridad funcionaría. Pero pueden haber variables, la primera podría ser que no hay clases, sino IDs, siendo de la estructura de la siguiente manera:

Insertar CODE, HTML o PHP:
<header>
   <div class="logo">
      <a href="/" [B]id="imagen"[/B]><img src="logo.png"></a>
      <a href="/" [B]id="tagline"[/B]><p>Descripción larga y molesta en dispositivos móviles</p></a>
   </div>
</header>

Entonces, en el código que te pasé tendrías que cambiar el ".tagline" por un "#tagline".

Suponiendo que no sea así la estructura, sino así:

Insertar CODE, HTML o PHP:
<header>
   <div class="logo">
      <a href="/"><img src="logo.png"></a>
      <a href="/"><p>Descripción larga y molesta en dispositivos móviles</p></a>
   </div>
</header>

Sin IDs ni clases para ningún elemento específico del logo, tendríamos que hacer selección desde el elemento padre, es decir:

.logo a p {display: none;}

Ahí estamos especificando que se dirija a la etiqueta <p> dentro de la etiqueta <a> que a su vez está dentro de la etiqueta con clase logo.

También podría no tener ninguna clase, así:

Insertar CODE, HTML o PHP:
<header>
   <div>
      <a href="/"><img src="logo.png"></a>
      <a href="/"><p>Descripción larga y molesta en dispositivos móviles</p></a>
   </div>
</header>

Haríamos lo mismo que arriba:

header a p{display: none;}

Ahí estamos especificando que se dirija a la etiqueta <p> dentro de la etiqueta <a> que a su vez está dentro de la etiqueta con clase <header>.

Si nada de lo anteriormente escrito te fue de utilidad, siéntete libre de enviarme un mp con la URL de tu web y con gusto te echaré una mano.
 
Atrás
Arriba