Sitio no responde en tablet

Hola,
Descubrí que mi sitio no responde en mi tableta. Pero responde si desactivo los plugins en modo seguro. Solo tengo plugins oficiales en mi sitio web.

Tengo los siguientes plugins en mi sitio web:

El problema no es visible en meta. Creo que es porque meta no está usando discourse-adplugin.

Sitio web visto en la tableta:

¿Podrías intentar desactivar tu bloqueador de anuncios o usar un modo incógnito para ver si eso tiene algún efecto?

Tengo el mismo problema en modo incógnito también.

Sospecho que esto tiene algo que ver con la nueva barra lateral, porque si uso el menú de hamburguesa para ocultar la barra lateral, el sitio se vuelve receptivo y se alinea perfectamente con la pantalla.

1 me gusta

Me temo que no tengo una tableta para probar esto yo mismo, pero ¿podrías intentar deshabilitar la barra lateral usando las configuraciones de administrador enable experimental sidebar hamburger y enable sidebar y ver si eso ayuda a corto plazo?:

1 me gusta

Sí, si deshabilito las dos configuraciones de la barra lateral, el sitio vuelve a ser receptivo y se alinea con la pantalla. El problema está relacionado con la barra lateral.

Hola,

Puedo reproducirlo en tu sitio. Creo que la causa es que los anuncios superiores tienen un ancho fijo. No estoy seguro si es posible seleccionar un tipo de anuncio responsivo :thinking: o hacerlo con CSS de ancho. Probablemente los anuncios de Discourse necesiten alguna actualización para funcionar mejor con la barra lateral… ¿o tienes alguna modificación en los anuncios?

1 me gusta

Esto es lo que estoy viendo en mi iPad Pro, por si acaso.

Avísame si quieres que lo intente de nuevo después de que cambies alguna configuración. :+1:

Bloqueadores de anuncios activos



Bloqueadores de anuncios inactivos



2 Me gusta

¿Puedes intentar añadir esto a un componente de tema nuevo o existente para comprobar cómo funciona?

Escritorio / CSS

@media screen and (max-width: 1000px) {
  .google-adsense .google-adsense-content {
    width: 100% !important;
  }
}
2 Me gusta

He añadido el CSS. Ahora no tengo el problema en el sitio principal, pero tengo el problema en todas las páginas.

No he realizado ninguna modificación en los anuncios. Estoy utilizando anuncios de tamaño fijo encima de la lista de temas en el plugin de AdSense.

1 me gusta

He tocado la configuración. ¿Puedes intentarlo una vez más?

No noto ninguna diferencia obvia, ¿quizás se deba al caché?

Bloqueadores de anuncios activos



Bloqueadores de anuncios inactivos



Entiendo. Creo que el problema está con los anuncios de ancho fijo. Por ejemplo, si abres el sitio con la barra lateral colapsada y luego la abres, los anuncios de tamaño completo también se moverán hacia la derecha y solo actualizarán el ancho del anuncio después de una actualización completa de la página.

Desafortunadamente, no puedo probarlo ahora en mi sitio de prueba.

Pero puedo imaginar que algo como esto podría funcionar también para los otros anuncios. ¿Puedes intentar cambiar el código anterior a esto?

@media screen and (max-width: 1110px) {
  .google-adsense .google-adsense-content {
    width: 100% !important;
    .adsbygoogle {
      width: 100% !important;
      > div {
        width: 100% !important;
      }
    }
  }
}
1 me gusta

He cambiado el CSS anterior por el nuevo. Pero sigo teniendo el mismo problema en todas las páginas, pero no en el sitio principal. También he intentado borrar la caché, pero sigue igual.

1 me gusta

Lo siento, ese fue mi mejor consejo por ahora, pero al menos ahora sabemos que los anuncios causan esto. Creo que puedes eliminar el código para asegurarte de que no entre en conflicto con la futura corrección. :slightly_smiling_face:

1 me gusta

Gracias por la ayuda. Espero que alguien solucione este problema pronto.

1 me gusta

Encontré que Meta también tiene el mismo problema en todas las páginas.

1 me gusta

Hola, oh sí, puedo reproducirlo. Parece que el max-width del .loading-container inferior, por debajo de 790px, causa esto con la barra lateral abierta en las páginas de temas.

¿Probablemente sería bueno si se añadiera al núcleo el --d-sidebar-width a este cálculo cuando .has-sidebar-page esté disponible?

Pero creo que tendrás una mejor experiencia en ese tamaño de pantalla en la vista móvil.

Resumen:

En la última página, el ancho fijo del anuncio superior causa esto y en las páginas de temas que mencioné anteriormente.

Esta solución rápida debería funcionar para ti.

Escritorio / CSS

.google-adsense .google-adsense-content {
  max-width: 100%;
  .adsbygoogle {
    max-width: 100%;
    > div {
      max-width: 100%;
    }
  }
}

@media all and (max-width: 790px) {
  body.has-sidebar-page {
    .topic-area > .loading-container {
      max-width: calc(100vw - var(--d-sidebar-width) - 32px);
    }
  }
}
2 Me gusta

Gracias, Don. Ahora el sitio responde y funciona como se esperaba en mi tablet. Espero que el personal de Discourse también corrija este error en meta.

1 me gusta