1

Possuo o seguinte modal e dentro dele basicamente existe uma imagem na área superior esquerda e um texto na lateral direita da imagem e por fim um formulário. Está tudo funcionando perfeitamente bem, porém quando aberto no mobile a minha div que contém o texto não fica centralizada.

Segue o código:

<!DOCTYPE html>

<html lang="pt-br">

    <head>

        <meta name="viewport" content="width-device-width, initial-scale=1.0, maximum-scale=1.0">
        <meta charset="UTF-8">
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
        <title>Modal automatico</title>

    </head>

    <body>

			<!--Modal--> 
			<div class="modal fade" id="modalExemplo" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
				<div class="modal-dialog modal-lg mt-5" role="document">
					<div class="modal-content">
						<div class="modal-header">
							<h5 class="modal-title" id="exampleModalLabel">Lorem Ipsum</h5>
							<button type="button" class="close" data-dismiss="modal" aria-label="Fechar">
								<span aria-hidden="true">&times;</span>
							</button>
						</div>
						<div class="modal-body">
                                <img src="" title="nao sei inserir imagem no SO-pt" style="float: left">
                                <div style="width: 50%; height: auto; border: 1px solid red; float: left; margin-left: 20px">
                                    <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p>
                                </div>
                                <form style="clear: both">
                                    <div class="form-group">
                                        <label for="exampleInputEmail1">E-mail</label>
                                        <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Digite ...">
                                        <small id="emailHelp" class="form-text text-muted">Nunca compartilharemos seu email com mais ninguém.</small>
                                    </div>
                                    <div class="form-group">
                                        <label for="exampleInputPassword1">Senha</label>
                                        <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Digite ...">
                                    </div>
                                   
                                </form>
						</div>
						<form class="modal-footer" method="GET" action="inscricao.php">
							
							<button type="submit" class="btn btn-primary">Fazer inscrição</button>
                        </form>
					</div>
				</div>
            </div>
            
            
			
        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

        <!--chamando o modal-->
        <script type="text/javascript">
            $(window).on('load',function(){
                $('#modalExemplo').modal('show');
            });
        </script>

    </body>

</html>

A intenção era fazer com a div que contém o texto ficasse alinhada ao início do formulário e ao fim do formulário, ou seja, ocupando espaço semelhante conforme o formulário ocupa.

1 Resposta 1

2

Cara aqui tem um modelo básico, o ideal é que use as classe nativas do Bootstrap, vc nem precisa de CSS extra para fazer isso. Use o Grid row/col, e as propriedades Flex do Bootstrap como flex-column etc. Leia a documentação vai te ajudar https://getbootstrap.com/docs/4.3/utilities/flex/

OBS: Se quiser centralizar a imagem depois que o texto for para baixo coloque na tag <img> a class="mx-auto"

inserir a descrição da imagem aqui

Segue o código da imagem acima:

<!DOCTYPE html>

<html lang="pt-br">

    <head>

        <meta name="viewport" content="width-device-width, initial-scale=1.0, maximum-scale=1.0">
        <meta charset="UTF-8">
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
        <title>Modal automatico</title>

    </head>

    <body>

			<!--Modal--> 
			<div class="modal fade" id="modalExemplo" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
				<div class="modal-dialog modal-lg mt-5" role="document">
					<div class="modal-content">
						<div class="modal-header">
							<h5 class="modal-title" id="exampleModalLabel">Lorem Ipsum</h5>
							<button type="button" class="close" data-dismiss="modal" aria-label="Fechar">
								<span aria-hidden="true">&times;</span>
							</button>
						</div>
						<div class="modal-body">
                                <div class="row flex-column flex-md-row">
                                    <img style="width: 100px; height: 100px" src="https://unsplash.it/100/100">
                                    <div class="col" style="border: 1px solid red;">
                                        <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p>
                                    </div>
                                </div>
                                <form style="clear: both">
                                    <div class="form-group">
                                        <label for="exampleInputEmail1">E-mail</label>
                                        <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Digite ...">
                                        <small id="emailHelp" class="form-text text-muted">Nunca compartilharemos seu email com mais ninguém.</small>
                                    </div>
                                    <div class="form-group">
                                        <label for="exampleInputPassword1">Senha</label>
                                        <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Digite ...">
                                    </div>
                                   
                                </form>
						</div>
						<form class="modal-footer" method="GET" action="inscricao.php">
							
							<button type="submit" class="btn btn-primary">Fazer inscrição</button>
                        </form>
					</div>
				</div>
            </div>
            
            
			
        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

        <!--chamando o modal-->
        <script type="text/javascript">
            $(window).on('load',function(){
                $('#modalExemplo').modal('show');
            });
        </script>

    </body>

</html>

6
  • fiz as modificações que mencionou, abri o link da doc e já comecei a ler, na verdade eu já venho lendo, só que às vezes preciso fazer algo por demanda e caio nesse cenário. Só que quando abro o Google Dev Tools e começo a redimensionar a tela chega em um dado onde a altura da imagem é alterada e a mesma fica bem estranha. Commented 12/09/2019 às 19:05
  • @LucasInácio sua imagem tem tamanho fixo em px?
    – hugocsl
    Commented 12/09/2019 às 20:14
  • tem sim, por que? Commented 12/09/2019 às 20:35
  • @LucasInácio Pq se tem medida fixa em px não era para acontecer isso, edita sua pergunta ai com o seu código como esta no momento e um print de como ta ficando
    – hugocsl
    Commented 12/09/2019 às 20:52
  • 1
    @LucasInácio boa garoto, valeu a força
    – hugocsl
    Commented 13/09/2019 às 13:35

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 .