Tutorial: Como fazer publicidade em responsive com CSS e HTML

CANIBAL · 15/02/2020

Css para hacer la publicidad .php en responsive
Tiempo sin hacer tutoriales....

Hace ya unos meses tuve un p**o problema con la publicidad de mi blog, lo que pasaba es que la publicidad no es responsive,
y desde el celular se veía super feo(quizás algunos me entiendan)*

¿Como resolver eso?
- Fácil carnal... css y html, nada más.

CSS:

.ads-responsive-pc, .ads-responsive-cell {
  position: relative;
  z-index: 0;
}
@media only screen and (max-width: 1180px) {
  .ads-responsive-pc {
    display: none!important
  }
}
@media only screen and (min-width: 1180px) {
  .ads-responsive-cell {
      display: none!important
}}

Y paraponer la publicidad como es....

HTML:

<center>
<div class="ads-responsive-jxyz-pc">
<!-- Publicidad 728x102.php -->
</div>
<div class="ads-responsive-jxyz-cell">
<!-- Publicidad 300x62.php -->
</div>
</center>

Edrien · 15/02/2020

Se agradece el aporte 🙂 , me va a servir de seguro.

Ricardo Smeja · 04/07/2020

Rápido y sencillo. Sin mucha complejidad. Gracias amigo.

Souhiro · 14/08/2020

Está bien, pero recuerda que el display: none; oculta el elementos pero el HTML sigue allí. Lo que puede funcionar tambien es poner la condicional de mobile:

Inserir CODE, HTML ou PHP:

 <b:if cond="data:blog.isMobile">
    <!-- Elemento que se mostrará en la version móvil-->
    <div>
    ...
    </div>
 <b:else/>
    <!-- Elemento que se mostrará en la versión Web -->
    <nav>
    ...
    </nav>
 </b:if>

Grasnero · 14/08/2020

Souhiro disse:
Está bien, pero recuerda que el display: none; oculta el elementos pero el HTML sigue allí. Lo que puede funcionar tambien es poner la condicional de mobile:

Inserir CODE, HTML ou PHP:

<b:if cond="data:blog.isMobile">  <div> ... </div> <b:else/>  <nav> ... </nav> </b:if>

Tenia nociones de lo de arriba, pero esto de abajo es nuevo conocimiento.. muchas gracias

Ivan_Caal · 20/09/2021

En donde lo aplico. o como los agrego no doy como realizarlo

Hipolito · 20/09/2021

Gracias por compartir

Mr. Robot · 19/11/2021

Gracias por este tuto colega!!

Tutorial: Como fazer publicidade em responsive com CSS e HTML

CANIBAL

Edrien

Ricardo Smeja

Souhiro

Grasnero

Ivan_Caal

Hipolito

Mr. Robot

Tópicos similares