Colorbox responsive

Question

Colorbox responsive

Navigation

#1 by (1 votes)

4

I'm using Colorbox in a project and need to be responsive.

I was able to change the size of all divs with Media Queries in CSS, but the #colorbox does not change the size! This makes the page scroll horizontally.

How can I resolve this?

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

The solution I found was to identify the screen size with JS and use conditionals to set the size of the Colorbox:

if (w < 480){cbWidth = 299;}

if(w > 480) { cbWidth = 400;}

$(".inline").colorbox({inline: true, width: cbWidth});

 $(".ajuda-open").colorbox({width: cbWidth});

javascript jquery css layout-responsivo popup

asked by anonymous 19.03.2015 / 15:52

1 answer

Use PDO prepared statements in function How to update PHP timezone with javascript using the Date.getTimezoneOffset function?

score 1 · Accepted Answer

Friend, while picking up your code and saving in a .html worked correctly the way it should work on responsive sites, where did the scroll bar appear?

<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>