Como fazer o botão CSS personalizado responsivo?
Criei um botão CSS, mas não responde. Eu tentei adicionar
EM or %
mas ainda não funciona. Quero mudar a largura e a altura de acordo com a resolução do ecrã.
segue-se o código CSS que estou a usar:
@media only screen and (min-width:321px) and (max-width:480px) { }
HTML
<div>
<p>
<button class="btn btn-1 btn-1a">Click Here To Enter The Future</button>
</p>
</div>
CSS
.btn {
font-size:0.875em;
display:block;
left:-60px;
margin-top:35px;
}
Neste momento, o botão está a mover-se da esquerda para a direita, mas quero que o botão apareça exactamente no mesmo local.
4
3 answers
Pode adicionar width:100%;
para atingir o seu objectivo.
.btn {
font-size:0.875em;
display:block;
left:-60px;
margin-top:35px;
width:100%;
}
16
Author: Ali Gajani, 2014-01-03 11:31:49
Isto deve funcionar
.btn {
width: 100%;
min-width: 50px; // add this if you want
max-width: 300px; // add this if you want, adjust accordingly
}
0
Author: CRABOLO, 2014-01-03 11:23:09
Isto funciona comigo.
<script>
$(document).ready(function() {
$('#select_preferences').multiselect({
buttonText: function(options, select) {
return 'Look for users that:';
},
buttonTitle: function(options, select) {
var labels = [];
options.each(function() {
labels.push($(this).text()); //get the options in a string. later it would be joined with - seprate between each.
});
if(!labels.length ===0 )
{
$('#range-div').removeClass('hide');
// The class 'hide' hide the content.
//So I remove it so it would be visible.
}
if (labels.length ===0)
$('#range-div').addClass('hide');
//If the labels array is empty - then do use the hide class to hide the range-selector.
return labels.join(' - ');
// the options seperated by ' - '
// This returns the text of th options in labels[].
}
});
0
Author: osherdo, 2016-03-16 10:20:05