Cómo hacer un Div que cambie de tamaño según la pantalla

Mercyjanel · 23 Nov 2016

Hola betas alguien sabe como hacer un div que cambie de tamaño según el tamaño de la pantalla si es movil o pc, gracias.

Carlosmax · 23 Nov 2016

Usa width con porcentajes, o media-query.

Si no sabes cómo hacerlos, busca en google o youtube, hay muchos tutoriales sobre eso, puedes buscar como Como hacer un div responsive.

nicolasio · 23 Nov 2016

Hola, la idea de la web responsive no es que cambie segun si es de escritorio o movil, sino por el tamaño de la pantalla.

Con usar anchos en porcentajes vas a estar bien para empezar, te dejo un ejemplo a lo que me refiero. Tambien es recomendable usar media queries que definan reglas en determinadas resoluciones, por ejemplo:

Insertar CODE, HTML o PHP:

.div-principal{
width: 80%;
margin-left: 10%;
}
 [MENTION=16931]medi[/MENTION]a (min-width: 768px){
.div-principal{
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
}

Importante: Para que el ancho de la web sea el de la pantalla es importante que incluyas la siguiente meta en el head de tu html

<meta name="viewport" content="width=device-width, initial-scale=1">

Saludos!

Mercyjanel · 23 Nov 2016

Sucede que eso lo quiero implementar en un <div id="publicidad"></div> ya que adsense me dijo que no podía poner baner de 300x250 antes del texto y luego lo cambie por un anuncio adaptable pero los ingresos calleron y me doy cuenta que en la pc me salen puro anuncio chico y lo que quisiera es hacerle contenedor ese div publicidad para cuando sea pc tenga el tamaño de 300x250 y así en los bloques adaptables me salgan ello y cuando sea móvil sea el pequeño que recomienda google, muchas gracias a todos por sus comentarios.

Carrizo · 23 Nov 2016

Creo que tu solución es esta: Modificar el código de anuncios adaptables - Ayuda de AdSense

Mercyjanel · 26 Nov 2016

Estaría bien este código para los anuncios entre el titulo y el contenido siguiendo la guía de google que a facilitado dacl86 alguien ya lo ha implementado?

Insertar CODE, HTML o PHP:

.Adaptable { width: 320px; height: 100px; }
       media(min-width: 500px) { .Adaptable { width: 300px; height: 200px; } }
       media(min-width: 800px) { .Adaptable { width: 336px; height: 280px; } }
        </style>
        <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
        <!-- Adaptable --> 
        <ins class="adsbygoogle Adaptable" 
            style="display:block" 
            data-ad-client="ca-pub-XXXXXXX11XXX9"
             data-ad-slot="8XXXXX1"></ins>
        <script> 
        (adsbygoogle = window.adsbygoogle || []).push({}); 
        </script>

Marketing Doing · 5 Dic 2016

Bueno amigo lo que puedes hacer es ponerle una clase al div, hacer un documento CSS o colocar una etiqueta <style></style>, especificar el archivo que quieres modificar, y colocarle un width dinámico(o dicho de otra forma con porcentajes). En teoria ya estaria, pero si no entiendes te dejare un ejemplo debajo:

HTML:

<style>
.nombre-de-la-clase-del-div{
width: 80%; /*aquí le especificas al editor de código el tamaño del width que quieres*/
height: 10%; /*y aquí especificarías el tamaño del height del div*/
}

/*La otra forma es con la etiqueta media*/
@ media screen and(width:800px){ /*Colocarías desde que tamaño de pantalla quieres que cambien los objetos*/
.nombre-de-la-clase-del-div{
width: auto;
height: auto;
margin: 10%;
}
}/*esto seria utilizando media querys*/
</style>

Cómo hacer un Div que cambie de tamaño según la pantalla

Mercyjanel

Carlosmax

nicolasio

Mercyjanel

Carrizo

Mercyjanel

Marketing Doing

Temas similares