1

Preciso fazer uma section como a da imagem. Como é para ficar

Para isso organizei dessa maneira.

HTML

 <section class="second-section">
  <div class="container">
    <div class="row align-items-center my-5">
      <div class="col-md-12 box-orange">
          <div class="col-md-6"><img src="img/campos.png" alt="campos"></div>
          <div class="col-md-6">
            <h3>Texto</h3>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dicta libero saepe natus nam recusandae molestiae neque reprehenderit quae, impedit eos vero, in eligendi voluptas nostrum deserunt odit voluptatibus voluptate quis?
            </p>
          </div>
      </div>
    </div>
  </div>
</section>

CSS

.second-section{
.box-orange{
background-image:url('/img/fundo2.png');
height: 400px;
color: white;
img{
  height: 480px;
  margin-top: -5%;
  margin-left: -2%;
  }
 }
}

Porém o resultado que consegui é esse, com o texto caindo para baixo ao invés de ficar ao lado. como esta

Se tratando da responsividade eu preciso deixar assim porém com o col-md-6 dessa maneira ele não fica.

responsividade

1 Resposta 1

1

A forma como vc montou o Grid do Bootstrap está equivocada, vc colocou uma div col-12 desnecessária, além disso vc usou um margin-left -2%, mas 2% seria mais adequado para o efeito que quer...

inserir a descrição da imagem aqui

Segue o código da imagem acima

.second-section .box-orange {
    background-image: url('/img/fundo2.png');
    height: 400px;
    color: white;
}

.second-section img {
    height: 480px;
    margin-top: -5%;
    margin-left: 2%;
    object-fit: cover;
}
@media (max-width: 768px) {
    .second-section .box-orange {
        background-image: url('/img/fundo2.png');
        height: initial;
        color: white;
        padding: 0;
        margin: 0;
    }
    .second-section img {
        height: 480px;
        margin-top: initial;
        margin-left: initial;
    }
}
<link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.0/css/bootstrap.min.css" />

<section class="second-section">
    <div class="container">
        <div class="row align-items-center my-5 bg-primary">
            
                <div class="col-md-6 box-orange">
                    <img class="w-100" src="https://placecage.com/100/100">
                </div>
                <div class="col-md-6 ml-5 ml-md-0">
                    <h3>Texto</h3>
                    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dicta libero saepe natus nam
                        recusandae molestiae neque reprehenderit quae, impedit eos vero, in eligendi voluptas
                        nostrum deserunt odit voluptatibus voluptate quis?
                    </p>
                </div>
            
        </div>
    </div>
</section>

2
  • Editei a pergunta com a responsividade para ver se fica melhor de entender. Commented 6/06/2019 às 22:18
  • @GuilhermeRigotti dei uma ajustada no código usei o @media no breacking point 768px que é o mesmo que o Bootstrap usa para telas médias -md-, mas se vc quiser pode acrescentar outros, eu particularmente acho que não precisa. Para afastar o texto da borda esquerda eu usei a classe ml-5 que é a maior original do Bootstrap, mas vc pode fazer outra se quiser.
    – hugocsl
    Commented 6/06/2019 às 22:37

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 .