Colorbox responsive

Asked

Viewed 283 times

4

I’m using Colorbox in a project and need to make it responsive.

I was able to change the size of all Divs with Media Queries in CSS, but div #colorbox does not change the size! This causes the page to be horizontally scrolled.

How can I fix 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 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 responsive-layout popup
  • 1

    You have some code to help us help you?

  • This part of HTML is the Divs with the content, but the div that has the #colorbox is created by Jquery if I’m not mistaken rs

  • So you can make a variable that stays null or undefined up to what #colorbox is created when it gets the value of the div. Then just change the div by jQuery.

  • var w = $(window). width(); if(w > 1600) { cbWidth = 300;} $(". inline"). colorbox({inline: true width, cbWidth});

  • The syntax is correct?

  • In your CSS example you wrote colobox, without the r, That was just the question or your real code is like this too?

Show 1 more comment

1 answer

1


Friend, by taking your code and saving in one. html worked correctly the way it should work on responsive websites, where appeared the scrollbar?

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

  • I’m a girl :D The colorbox creates a div by grouping all the contents together, and she was fixed in size on JS! I managed to fix it, but thanks for your attention!

Browser other questions tagged javascript jquery css responsive-layout popup

You are not signed in. Login or sign up in order to post.