resolvido Bug esquisito HTML/CSS3

[Lennard]

Olá, estou fazendo um site para vender, e quando fui fazer a loja, fiz os botões bonitinhos para abrirem aqueles modal com as informações, mas quando clico neles e fecho a modal fica com um espaço branco na lateral direita da pagina que vai aumentando conforme clico no botão, alguém sabe como resolver?

OBS: eu já apaguei os produtos da página e refiz mas continua na mesma

 

http://prntscr.com/gsfx69

 

Codigo

            <!--- – Item1 da Loja – --->
            <div class="col-md-4 text-center">
                <div class="panel panel-pricing panel-primary">
                    <div class="panel-heading">
                        <h3>VIP</h3>
                    </div>
                    <div class="panel-body text-center">
                        <center>
                            <img class="img-responsive" src="assets\img\vip.png">
                        </center>
                    </div>
                    <ul class="list-group text-center ok ok">
                        <li class="list-group-item">
                            <strong>R$</strong>10</li>
                    </ul>
                    <div class="panel-footer">
                        <button type="button" class="btn btn-info btn-block" data-toggle="modal" data-target="#vipmais">VANTAGENS</button>
                        <br>
                        <div id="vipmais" class="modal fade" role="dialog">
                            <div class="modal-dialog">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <button type="button" class="close" data-dismiss="modal">×</button>
                                        <h4 class="modal-title">VIP</h4>
                                    </div>
                                    <div class="modal-body">
                                        <p>Vantagens</p>Lorem Ipsum Vantagens
                                        <br>Lorem Ipsum Vantagens
                                        <br>
                                    </div>
                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-default" data-dismiss="modal">Fechar</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <a href="#" class="btn btn-lg btn-block btn-success"> COMPRAR</a>
                        <div class="conteiner"></div>
                    </div>
                </div>
            </div>
            <!--- – Item2 da Loja – --->
            <div class="col-md-4 text-center">
                <div class="panel panel-pricing panel-primary">
                    <div class="panel-heading">
                        <h3>VIP+</h3>
                    </div>
                    <div class="panel-body text-center">
                        <center>
                            <img class="img-responsive" src="assets\img\vip+.png">
                        </center>
                    </div>
                    <ul class="list-group text-center ok ok">
                        <li class="list-group-item">
                            <strong>R$</strong>20</li>
                    </ul>
                    <div class="panel-footer">
                        <button type="button" class="btn btn-info btn-block" data-toggle="modal" data-target="#vipmais">VANTAGENS</button>
                        <br>
                        <div id="vipmais" class="modal fade" role="dialog">
                            <div class="modal-dialog">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <button type="button" class="close" data-dismiss="modal">×</button>
                                        <h4 class="modal-title">VIP+</h4>
                                    </div>
                                    <div class="modal-body">
                                        <p>Vantagens</p>Lorem Ipsum Vantagens
                                        <br>Lorem Ipsum Vantagens
                                        <br>
                                    </div>
                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-default" data-dismiss="modal">Fechar</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <a href="#" class="btn btn-lg btn-block btn-success"> COMPRAR</a>
                        <div class="conteiner"></div>
                    </div>
                </div>
            </div>
            <!--- – Item3 da Loja – --->
            <div class="col-md-4 text-center">
                <div class="panel panel-pricing panel-primary">
                    <div class="panel-heading">
                        <h3>VIP++</h3>
                    </div>
                    <div class="panel-body text-center">
                        <center>
                            <img class="img-responsive" src="assets\img\vip++.png">
                        </center>
                    </div>
                    <ul class="list-group text-center ok ok">
                        <li class="list-group-item">
                            <strong>R$</strong>30</li>
                    </ul>
                    <div class="panel-footer">
                        <button type="button" class="btn btn-info btn-block" data-toggle="modal" data-target="#vipmais">VANTAGENS</button>
                        <br>
                        <div id="vipmais" class="modal fade" role="dialog">
                            <div class="modal-dialog">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <button type="button" class="close" data-dismiss="modal">×</button>
                                        <h4 class="modal-title">VIP++</h4>
                                    </div>
                                    <div class="modal-body">
                                        <p>Vantagens</p>Lorem Ipsum Vantagens
                                        <br>Lorem Ipsum Vantagens
                                        <br>
                                    </div>
                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-default" data-dismiss="modal">Fechar</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <a href="#" class="btn btn-lg btn-block btn-success"> COMPRAR</a>
                        <div class="conteiner"></div>
                    </div>
                </div>
            </div>

Editado Outubro 2, 2017 por Lennard

[Rezende]

body {
    padding-right: 0!important;
}

Só coloca isso no css

[Skyppher]

Tente usar:

.modal-open .navbar-fixed-top,
.modal-open .navbar-fixed-bottom {
padding-right: 17px;
}

[Lennard]

 

Tente usar:

.modal-open .navbar-fixed-top,
.modal-open .navbar-fixed-bottom {
padding-right: 17px;
}

Nao funcionou

[Skyppher]

 

 

Nao funcionou

Você fez com Bootstrap?

 

Caso não use, eu recomendo!

 

Segue o link para exemplos: https://v4-alpha.getbootstrap.com/components/modal/

[Lennard]

 

Você fez com Bootstrap?

 

Caso não use, eu recomendo!

 

Segue o link para exemplos: https://v4-alpha.getbootstrap.com/components/modal/

 

Sim fiz com bootstrap, nem fiz edição nenhuma nos modsls, acho eles bem bonitos

[Rezende]

Manda o código todo, não tem como saber só com uma imagem.

[Lennard]

Manda o código todo, não tem como saber só com uma imagem.

Tem razão, já atualizei no topico

[Rezende]

É melhor tu hospedar em algum lugar, só uma parte do código não tem como, coloca em alguma hospedagem de graça ai.

[Lennard]

É melhor tu hospedar em algum lugar, só uma parte do código não tem como, coloca em alguma hospedagem de graça ai.

Hospedar o site???

[Rezende]

É carai

[Lennard]

É carai

Vou mandar o link por MP

[Lennard]

body {
    padding-right: 0!important;
}

Só coloca isso no css

 

Sou meio burro. como não me lembrei de usar o padding ;-;, resolvido, obrigado

[lucakiksd07]

Sua dúvida foi marcada como [Resolvido] e movido à área de dúvidas resolvidas.


Atenciosamente,
Gamer's Board