0

Estou com o seguinte problema estou ultilizando bootstrap na versão 3 preciso que minha pagina fique igual a desse template: inserir a descrição da imagem aqui porem quando eu redimenciono minhas imagens ficam assim: inserir a descrição da imagem aqui

gostaria que a imagem preta fica-se em baixo da imagem da taça de vinho porem que pegue 100% de largura tanto a de cima quanto a de baixo percebam que quando redimenciono elas ficam tortas e não seguem o padrão que eu quero segue meus códigos:

o HTML:

 <div class="row container-fluid text-center general">
       <div class=" col-sm-5 col-sm-offset-1 banner-wine">
          <img src="images/taca.png" alt="novidades de vinhos pedro carvalho" />
       </div>
       <div class=" col-sm-6 bg-cadastro">
         <img src="images/novidades.png">
         <h3>eventos,degustações e promoções</h3>
         <p>Receba convites para eventos,degustações e informações sobre 
         tudo o que acontece na terra a terra e no mundo do vinho</p>
         <form>
            <input type="text" id="email" name="email" placeholder="e-mail">
            <button>cadastrar</button>
          </form>
       </div>
     </div>

o CSS: .banner-wine{ max-width: 100%; }

.bg-cadastro{
    background-color: @colorButtonDark;
    width: 549px;
    max-width: 100%;
    height: 407px;
    max-height: 480px;
    padding-top: 80px;
    h3{
        color: @colorHovers;
        .fontInfos(1em);
    }p{
        width: 300px;
        max-width: 80%;
        margin: 0 auto;
        color: @colorLinks;
    }
}

    form {
        border: 1px solid @colorLinks;
        padding: 15px;
        margin: 40px auto;
        width: 390px;
        max-width: 100%;
        #email{
            border: none;
            outline: none;
            margin-right: 50px;
            background-color: transparent;
        }button{
            background-color: transparent;
            border: none;
            outline: none;
            color: @colorLinks;
            .fonts(1em);
            text-transform: uppercase;
        }:before{
            content: '|';
            padding-right: 30px;
        }::-webkit-input-placeholder {
           color: @colorLinks;
           text-transform: uppercase;
        }:-moz-placeholder {
           color: @colorLinks;  
           text-transform: uppercase;
        }
    }

OBS: lembrando que também estou ultilizando less

5
  • 1
    De uma classe à imagem chamada img-responsive
    – Miguel
    Commented 19/06/2016 às 14:48
  • @Miguel cara essa class me ajudou um pouco porem ela bagunço oque ja tinha feito e meio que desalinho a imagem que estava junto no background-color como estava na primeira imagem do post Commented 19/06/2016 às 15:04
  • 1
    Eu acho que isso é do off-set que tem
    – Miguel
    Commented 19/06/2016 às 15:06
  • mesmo assim ainda nao funcionou Commented 19/06/2016 às 23:55
  • Não tente criar a estrutura da sua página na mão, os grids do bootstrap estão justamente aí pra te ajudar nessa tarefa penosa! Commented 20/06/2016 às 16:19

2 Respostas 2

1

Eu faria assim

<div class="row container-fluid text-center general">
       <div class="col-xs-12 col-sm-5 col-sm-offset-1 banner-wine">
          <img src="images/taca.png" alt="novidades de vinhos pedro carvalho"  style="width: 100%;" />
       </div>
       <div class="col-xs-12 col-sm-6 bg-cadastro">
         <img src="images/novidades.png" style="width: 50%; margin-left: 25%;">
         <h3 class="text-center">eventos,degustações e promoções</h3>
         <p>Receba convites para eventos,degustações e informações sobre 
         tudo o que acontece na terra a terra e no mundo do vinho</p>
         <form>
            <input type="text" id="email" name="email" placeholder="e-mail">
            <button>cadastrar</button>
          </form>
       </div>
     </div>

Faça um teste.

1
  • Por favor aprenda a usar o marcador de texto, pois se não o código não aparece na página, eu já editei a resposta de qualquer maneira :)
    – Syzoth
    Commented 20/06/2016 às 15:07
1

Tente assim

<div class="container">
 <div class="row text-center general">
   <div class=" col-md-12 banner-wine">
      <img class="img-responsive" src="images/taca.png" alt="novidades de vinhos pedro carvalho" />
   </div>
   <div class=" col-md-12 bg-cadastro">
     <img  class="img-responsive" src="images/novidades.png">
     <h3>eventos,degustações e promoções</h3>
     <p>Receba convites para eventos,degustações e informações sobre 
     tudo o que acontece na terra a terra e no mundo do vinho</p>
     <form>
        <input type="text" id="email" name="email" placeholder="e-mail">
        <button>cadastrar</button>
      </form>
   </div>
 </div>

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 .