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

kanikase Seguir

Préstamo
Ómicron
Programador
Verificación en dos pasos activada
Verificado por Whatsapp
¡Ha verificado su Paypal!
Desde
22 Feb 2014
Mensajes
4.716
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
 

Cicklow

Admin
Dseda
Verificado
Verificación en dos pasos activada
Verificado por Whatsapp
¡Ha verificado su Paypal!
Suscripción a IA
Desde
30 May 2011
Mensajes
1.101
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

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

kanikase

Préstamo
Ómicron
Programador
Verificación en dos pasos activada
Verificado por Whatsapp
¡Ha verificado su Paypal!
Desde
22 Feb 2014
Mensajes
4.716
tendrias que usar min-height para hacerlo responsive... indicandole que el minimo seria 45. tambien podes indicarle un maximo con max-height

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

140430011639269936.png
 

Cicklow

Admin
Dseda
Verificado
Verificación en dos pasos activada
Verificado por Whatsapp
¡Ha verificado su Paypal!
Suscripción a IA
Desde
30 May 2011
Mensajes
1.101
Ya esta :) ahora intentaré centrar el boton cuando se ve en el celular, y alinear a la derecha en computadora :neglected:

140430011639269936.png

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

el:
HTML:
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
es para detectar los mobil desde CSS... tons le puse float none (sin float) y que lo centre al objeto...

Fijate si eso te funciona :) (Este code va abajo del otro)
 
Arriba