💡 Aunque nuestros banners no sean receptivos, puede mostrar y ocultar fácilmente los tamaños diferentes según el dispositivo. Este truco sencillo de CSS le mostrará cómo hacerlo.
Instalación
Para realizarlo, solamente hay que añadir este código donde quiera que se muestren los banners:
<style type="text/css">
.mobileShow {display: none;}
/* Smartphone Portrait and Landscape */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px){
.mobileShow {display: inline;}
}
.mobileHide { display: inline; }
/* Smartphone Portrait and Landscape */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px){
.mobileHide { display: none;}
}
</style>
<div class="mobileShow"> Your code snippet for mobile </div>
<div class="mobileHide"> Code snippet for desktop only </div>
❗️No olvide insertar los códigos de banners desde su cuenta de Adsterra en lugar de "Your code snippet for mobile" y "Code snippet for desktop only".
Puede utilizar cualquier método de instalación: directamente en HTML (sin embargo, no en la sección <head>), añadiendo widgets/gadgets, elemento "custom HTML", etc.
La combinación más óptima son los Banners de 728x90 y 320x50, sin embargo, puede elegir el que quiera.
Comprobando si funciona
Chrome Dev Tools le permite comprobar cómo se ve su sitio web en dispositivos diferentes.
Abra su sitio web, haga clic con el botón derecho en cualquier lugar de la página y seleccione "Inspeccionar"; se abrirá el panel Chrome Dev Tools.
Haga clic en Toggle Device Toolbar en la esquina superior derecha del panel
Seleccione el dispositivo móvil del menú desplegable