Tutorial: Cómo hacer publicidad en responsive con CSS y HTML

[CANIBAL]

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.​

.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....

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

 

[Edrien]

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

 

[Ricardo Smeja]

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

 

[Souhiro]

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:

 <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]

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:

 <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>

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

 

[Ivan_Caal]

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

 

[Hipolito]

Gracias por compartir

 

[Mr. Robot]

Gracias por este tuto colega!!