1

Eu dividi em 2 colunas um snippet, porém a imagem não fica afastada do canto direito e na versão mobile também tem um espaço. Eu copiei o snippet sabe como faço pra ficar igual na foto abaixo.

Original:

inserir a descrição da imagem aqui

MEU SNIPPET:

inserir a descrição da imagem aqui

Meu codigo, está em Bootstrap 3.7, a classe img-responsive aparentemente não está tendo efeito.

*{
    margin: 0;
    padding: 0;
}

.lightGrey-section {
    background-color: brown;
}

.without-padding {
    padding:0;
}

.about-content h3 {
    font-size: 27px;
}
.about-content {
    padding: 11% 9% 11%;
}
.about-content p{
    font-size: 17px;
}
.about-image a{
    text-decoration: none;
}

.quadro .classnamebb {
    margin-top: 10px;
    background-color: red;
    display:inline-block;
    color:#ffffff;
    font-size:15px;
     padding: 6px 12px;
    text-decoration:none;
    text-align:center;
}.classname:hover {
    background-color: red;
}.classname:active {
    position:relative;
    top:1px;
}

.carousel-inner>
.item>a>img,
.carousel-inner>
.item>img,
.img-responsive,
.thumbnail a>img,
.thumbnail>img{display:block;max-width:100%;height:auto}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
    <div id="about" class="pad-sec-top wow fadeInUp" data-wow-duration="1s" data-wow-delay="0.6s">
        <!--Container Starts-->
        
        <!--Container Ends-->
        <div class="about-section clearfix lightGrey-section">
           <div class="col-md-6">
              <div class="about-content">
                  <div class="quadro">
                 <h3>We are a creative agency</h3>
                 <p> He an thing rapid these after going drawn or. Timed she his law the spoil round defer. In surprise concerns informed betrayed he learning is ye. Ignorant formerly so ye blessing. He as spoke avoid given downs money on we. Of properly carriage shutters ye as wandered up repeated moreover. Inquietude attachment if ye an solicitude to. Remaining so continued concealed as knowledge happiness. Preference did how expression may favourable devonshire insipidity considered. An length design regret an hardly barton mr figure. </p>
                 <a href="#" class="classnamebb">Veja mais</a>
              </div>
           </div></div>
           <div class="col-md-6 without-padding">
              <div class="about-image"> 
                 <img src="https://i.imgur.com/19hAzAA.jpg" class="img-responsive" alt="">
              </div>
           </div>
        </div>
     </div>

3 Respostas 3

0

João vc estava no caminho certo, eu vi que vc criou uma classe chamada without-padding mas basicamente faltou um !important para fazer esse padding sobrscrever o padding original do grid do BS3. Deveri ficar como abaixo e vai funcionar

.without-padding {
    padding: 0 !important;
}

Código aplicado

inserir a descrição da imagem aqui

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Page Title</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
<style>
  
  
  *{
    margin: 0;
    padding: 0;
}

.lightGrey-section {
    background-color: brown;
}

.without-padding {
    padding: 0 !important;
}

.about-content h3 {
    font-size: 27px;
}
.about-content {
    padding: 11% 9% 11%;
}
.about-content p{
    font-size: 17px;
}
.about-image a{
    text-decoration: none;
}

.quadro .classnamebb {
    margin-top: 10px;
    background-color: red;
    display:inline-block;
    color:#ffffff;
    font-size:15px;
     padding: 6px 12px;
    text-decoration:none;
    text-align:center;
}.classname:hover {
    background-color: red;
}.classname:active {
    position:relative;
    top:1px;
}

.carousel-inner>
.item>a>img,
.carousel-inner>
.item>img,
.img-responsive,
.thumbnail a>img,
.thumbnail>img{display:block;max-width:100%;height:auto}

</style>
</head>
<body>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
    <div id="about" class="pad-sec-top wow fadeInUp" data-wow-duration="1s" data-wow-delay="0.6s">
        <!--Container Starts-->
        
        <!--Container Ends-->
        <div class="about-section clearfix lightGrey-section">
           <div class="col-md-6">
              <div class="about-content">
                  <div class="quadro">
                 <h3>We are a creative agency</h3>
                 <p> He an thing rapid these after going drawn or. Timed she his law the spoil round defer. In surprise concerns informed betrayed he learning is ye. Ignorant formerly so ye blessing. He as spoke avoid given downs money on we. Of properly carriage shutters ye as wandered up repeated moreover. Inquietude attachment if ye an solicitude to. Remaining so continued concealed as knowledge happiness. Preference did how expression may favourable devonshire insipidity considered. An length design regret an hardly barton mr figure. </p>
                 <a href="#" class="classnamebb">Veja mais</a>
              </div>
           </div></div>
           <div class="col-md-6 without-padding">
              <div class="about-image"> 
                 <img src="https://i.imgur.com/19hAzAA.jpg" class="img-responsive" alt="">
              </div>
           </div>
        </div>
     </div>
  
<script>

</script>
  
</body>
</html>

2
  • 1
    Obg deu certo, to começando passa despercebido essas coisas, vlw ai.
    – Joao B4-5
    Commented 30/01/2021 às 22:10
  • @JoaoB4-5 no inicio tudo eh mais complicado, depois o nosso olho vai ficando treinado. Valeu a força, bons estudos!
    – hugocsl
    Commented 30/01/2021 às 22:55
0

Fala João!

1º Coisa, seu css nunca irá pegar na IMG porque não existe uma estrutura HTML que tenha .thumbnail > img

<div class="about-image">
  <img src="./teste.jpg" alt="teste">
</div>

2º Se você adicionar essa classe, ele irá pegar aquele estilo. O problema é que o thumbnail adiciona uma borda branca de 1x solid #fff

<div class="about-image thumbnail">
  <img src="./teste.jpg" alt="teste">
</div>

Então para resolver eu faria o seguinte: Criaria uma classe de exemplo para ai sim fazer .exemplo > img {}

<div class="about-image exemplo">
  <img src="./teste.jpg" alt="teste">
</div>

E então, no css ficaria assim:

.example img {
  display: block;
  max-width: 100%;
  width: 100%; // necessário colocar width 100%;
  height: auto // height auto já é o default, então tanto faz vc colocar isso.
}

Ou então, como eu gosto de fazer no meu reset, eu já coloco todas as img com essas propriedades!

img {
  display: block;
  width: 100%;
  max-width: 100%;
}
0

A imagem não está a ocupar a largura toda da 2ª coluna porque as colunas têm, por defeito, um padding à esquerda e à direita. Vejo que teve o cuidado de remover este padding, adicionando a classe without-padding. Porém, esta classe esta a ser sobreposta pela classe col-md-6 que por sua vez adiciona o padding.

Existem duas formas de resolver este problema:

Adicionando !important:

.without-padding {
  padding: 0 !important;
}

Atribuindo mais especificidade à sua classe:

.col-md-6.without-padding {
  padding: 0;
}

Atenção que se optar pela segunda forma, isto irá aplicar-se a todas sempre que conjugue estas duas classes. Pessoalmente, creio que a primeira forma é mais adequada.

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 .