Alinear a la izquierda en web y al centro en movil

[Abelmelero]

Hola,

Quiero mostrar un div con un anuncio dentro. Pero me gustaría que cuando se visualize desde un ordenador, el anuncio aparezca en la izquierda y cuando se muestre en el movil, que el anuncio salga en el centro. Tengo esto puesto en css, pero no funciona.

Código:

#cajaanuncio{width:600px;height:300px;}
@media(min-width:300px){#cajaanuncio{margin: 0 auto; width:300px;height:285px;}}
@media(min-width:500px){#cajaanuncio{width:337px;height:281px;}}
@media(min-width:800px){#cajaanuncio{width:600px;height:300px;}}

De esta forma se muestra el anuncio siempre en medio tanto en la web como en el movil y si le quito el margin: 0 auto; se ve tanto en el movil como en la pantalla en la izuquierda.

¿Qué puedo hacer? Cómo lo soluciono?

Gracias y saludos!

[javy7v]

Veremos si te puedo guiar sin probarlo yo mismo que yo tambien me lio bastante, creo que puedes hacer algo asi:

En tu pagina donde tienes el anuncio pones algo como esto:

Código:

<link href="../css/anuncioMovil.css" rel="stylesheet" type="text/css" media="handheld, only screen and (max-device-width: 480px)" />

Código:

<link href="../css/anuncioPC" rel="stylesheet" type="text/css"  media="screen and (min-device-width: 799px)" />

De esta manera con el primero ese CSS solo se activara cuando se visite la pagina desde un movil y en el segundo cuando sea en una pantalla grande de 800 px en adelante.

Por lo que en el CSS normal que ya tenias le das el estilo al anuncio que quieras para colocarlo a un lado y en el nuevo movil.css le das el que quieras para colocarlo al centro.

Después te recomiendo usar % en vez de PX que puede quedar muy distinto de una pantalla a otra.

[Abelmelero]

Muchas gracias por tu respuesta.

Aunque sinceramente no tengo ni idea de cómo implementar eso. Es decir, yo tengo algo así:

En el signle.php, ya que uso wordpress, tengo esto:

Código:

<div id="cajaanuncio">
CODIGO DE ANUNCIO
</div>

Y en el archivo css tengo puesto esto:

Código:

#cajaanuncio{width:600px;height:300px;}
@media(min-width:300px){#cajaanuncio{margin: 0 auto; width:300px;height:285px;}}
@media(min-width:500px){#cajaanuncio{width:337px;height:281px;}}
@media(min-width:800px){#cajaanuncio{width:600px;height:300px;}}

Dónde tengo que poner el código que me has dado y dónde pongo el anuncio y cómo llamo al css?

Como ves no tengo ni idea, esto se me da fatal.

Mil gracias

[andresgarciadev]

usa esto

Código CSS:

@media only screen and (min-device-width: 300px) {#cajaanuncio{margin: 0 auto; width:300px;height:285px;}}
 

[Abelmelero]

Gracias por el código pero tampoco funciona. ¿Alguien sabría qué poner?

Gracias y saludos!

[madman_18]

Iniciado por Abelmelero

Gracias por el código pero tampoco funciona. ¿Alguien sabría qué poner?

Gracias y saludos!

¿Tienes ese div dentro de algún bloque o algo?
Si le asignas un ancho fijo podrías meterlo como absoluto y posicionarlo arriba de la página por ejemplo.

Algo tipo así

Código CSS:

#cajaanuncio{width:300px;height:auto;position:absolute;top:0;left:50%;margin:0 0 0 -150px;}
 

Así tendrías que tenerlo en el centro