Estou usando Colorbox
em um projeto e preciso deixa-lo responsivo.
Consegui mudar o tamanho de todas as divs com Media Queries no CSS, mas a div #colorbox
não muda o tamanho! Isso faz com que a pagina fique com rolagem horizontal.
Como posso resolver isso?
<div style='display:none'>
<div id='forgot_pass' style="padding: 10px 13px !important;">
<div style='background:#fff; text-align: center; border: 5px solid #a10d0d;min-height: 250px;margin: auto'>
<form action="<?php echo site_url('cadastro/redefinirSenha') ?>" method="post"
id="form-forgot-pass">
<div id="input-block-forgot">
<h2 class="titulo">ESQUECI MINHA SENHA</h2>
<p>Informe abaixo seu CPF para resetar sua senha.</p>
<input type="text" class="cpf" name="cpf" id="cpf" placeholder="CPF" /><br>
<input type="submit" id="botao-enviar" value=""/>
<p class="alert alert-error" id="user-not-found"
style="display: none; color: darkred; font-weight: bold"></p>
</div>
<div id='message-success-reset' style="display: none;">
<h2 class="titulo" id="sucesso">SUA SENHA FOI RESETADA</h2>
<p>.</p>
</div>
</form>
</div>
</div>
</div>
@media (max-width: 376px){
#cboxLoadedContent{
width: 370px !important;
}
#cboxContent{
width: 370px !important;
}
#colobox{
width: 370px !important;
}
#cboxWrapper{
width: 370px !important;
min-height: 500px;
}
}
@media (max-width: 321px){
#cboxLoadedContent{
width: 300px !important;
}
#cboxContent{
width: 300px !important;
}
#colobox{
width: 300px !important;
}
#cboxWrapper{
width: 300px !important;
min-height: 500px;
}
}
A solução que achei foi identificar o tamanho da tela com JS e usar condicionais para definir o tamanho do Colorbox:
if (w < 480){cbWidth = 299;}
if(w > 480) { cbWidth = 400;}
$(".inline").colorbox({inline: true, width: cbWidth});
$(".ajuda-open").colorbox({width: cbWidth});
null
ouundefined
até o que a#colorbox
seja criada, quando ela obtem o valor da div. Daí é só alterar a div pelo jQuery.