4

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});

6
  • 1
    Tem algum código para nos ajudar a te ajudar?
    – mutlei
    19/03/2015 às 14:54
  • Essa parte de HTML é as Divs com o conteúdo, mas a div que tem o #colorbox é criado pelo JQuery se não me engano rs
    – fronthendy
    19/03/2015 às 15:00
  • Então você pode fazer uma variável que fica null ou undefined até o que a #colorbox seja criada, quando ela obtem o valor da div. Daí é só alterar a div pelo jQuery.
    – mutlei
    19/03/2015 às 15:05
  • var w = $(window).width(); if(w > 1600) { cbWidth = 300;} $(".inline").colorbox({inline: true, width: cbWidth});
    – fronthendy
    19/03/2015 às 15:09
  • A sintaxe esta correta?
    – fronthendy
    19/03/2015 às 15:14

1 Resposta 1

1

Amigo, ao pegar seu codigo e salvar em um .html funcionou corretamente da forma como deve funcionar em sites responsivos, onde apareceu a barra de rolagem?

<style>
    @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;
        }
    }
 </style>

    <div>
            <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>
1
  • Sou menina :D O colorbox cria uma div agrupando todo o conteudo, e ela estava com o tamanho fixo no JS! Consegui resolver, mas obrigada pela atenção!
    – fronthendy
    20/03/2015 às 16:39

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .