Inclusión de altura para diseño responsive en botón de donación

kanikase dijo:

Hola, necesito ayuda, estoy agregandole algunas cositas a mi blog, una de ellas son los botones para compartir, y abajo de eso, estoy poniendo algo igual, pero en vez de que sea para compartir, es para donar, el problema es que ahi, tengo que agregar "height" y si no lo agrego no se hace del tamaño automatico, y necesito que sea asi porque tengo diseño responsive, alguien me puede ayudar, aqui el codigo:

CSS:

HTML:

<style>
#donar {
background: #333;
height: 45px;
margin: -4px 0 15px 0;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
padding: 10px;
}
#boton-donar{
float: right;
margin: -5px auto;
}
</style>

HTML:

HTML:

<div id="donar">
<div style="font-style:italic;color:#f1f1f1;font-size:13px;line-height:1.2em;padding-left:5px;max-width:456px;float: left;">El contenido y material publicado así como la asistencia impartida es <b>completamente gratuita</b>. Tu contribución permite que este sitio continue en funcionamiento.</div>
<div id="boton-donar">
<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_blank">
  <input type="hidden" name="cmd" value="_s-xclick"/>
  <input type="hidden" name="hosted_button_id" value="PEGYS5AHRDFPJ"/>
<input type="image" src="https://www.paypalobjects.com/es_XC/MX/i/btn/btn_donateCC_LG.gif" border="0" name="submit" alt="PayPal, la forma más segura y rápida de pagar en línea."/>
</form>                                                                                             </div>
</div>

Aqui es donde lo estoy usando:

AdSense en medio de las entradas - Ayudar Bloggers

Hacer clic para expandir...

cicklow dijo:

tendrias que usar min-height para hacerlo responsive... indicandole que el minimo seria 45. tambien podes indicarle un maximo con max-height

Hacer clic para expandir...

kanikase dijo:

Ya esta 🙂 ahora intentaré centrar el boton cuando se ve en el celular, y alinear a la derecha en computadora :neglected:

Hacer clic para expandir...

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
	#boton-donar{
		float: none;
		margin-left: auto;
		margin-right: auto;
	}
}

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {