Hello, I have a section where there is an image on the left and text on the right. By adding a lot of text on the right side, under the image there is a lot of white space until the next section, as I show in the screenshot, the circle and the black X. Would there be a way to put another image below the first or text to fill in the gap that remains? If I add the image code below the other, it moves everything down. If I place it after the text, it places the second image, when the text is finished, of course. I don't know how to distribute the columns to fill the gap and not break it for mobile devices. Thank you
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Todo sobre nosotros</title>
<!-- mobile responsive meta-->
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="wdt_100 pad_100">
<div class="container">
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-4"><img src="https://ibb.co/nOMPLV" alt="image"></div>
<div class="col-lg-8 col-md-8 col-sm-8 about_desc">
<h3 class="black-color mar_btm30">Nuestra <span class="lytgreen-head">Historia</span></h3>
<p> Desbroces y Limpieza de Fincas nos encontramos en la Sierra de Gredos, en Guisando, un pueblo al sur de la provincia de Avila.
Nuestra radio de trabajo principalmente esta en Castilla y León, Comunidad de Madrid, Toledo, Caceres, aunque hemos realizado trabajos en toda
España: Barcelona, Lérida, Badajoz, Sevilla, Valencia, ...
</p>
<p class="black_txt">Nuestra empresa la compone un equipo de personas profesionales, cualificadas y altamente comprometidas con nuestros clientes que además
transmiten los valores de nuestra marca allá donde van, siendo éstos, servicio, calidad, seriedad y profesionalidad.</p>
<p>Para nosotros la palabra “integral” tiene una connotación de servicio y responsabilidad para con nuestros clientes que va más allá del concepto comercial
que venden otras empresas, ya que nuestra experiencia nos ha enseñado que las necesidades nuestros clientes son más complejas e imprevisibles de lo que se
pueda imaginar, por lo que nuestros parámetros de eficacia, responsabilidad y calidad son siempre los más altos.</p>
<p class="black_txt">Es por eso que le ofrecemos todo un abanico de servicios relacionados a desbroces y limpieza de fincas y parcelas, tanto urbanas como interurbanas.
Vallado de parcelas grandes o pequeñas, en malla galvanizada o en madera tratada contra los elementos.
Podas y remondes de todo tipo: frutales, olivares, pinos, todo clase de arboles en general.
Construimos o restauramos el muro de piedra que tantos años lleva rodeando su finca y se desmorona. </p>
<h4>We Provide All Solutions under one Roof</h4><span class="friendly_customer_Txt">Friendly customer service staff for your all questions!</span><a href="services.html" class="view-all hvr-bounce-to-right slide_contact_btn slide_service_btn mar_lft_zero">OUr Services</a><a href="contact.html" class="view-all hvr-bounce-to-right slide_contact_btn service_mar_left">Contact Us</a>
</div>
</div>
</div>
</div>
</body>
</html>
I hope and serve you.
What I did was to include the image inside the container that you use for the text, add the class
img-responsive
and apply the propertyfloat: left;
(I also added a margin to the image)This moves the text below the blank "hole" you were leaving earlier.
ADD
Your code initially is this:
Then I removed all the classes that your image had and moved it inside the
div
one you use for text.img-responsive
This done, I applied the class (which is "native" to Bootstrap) inside the image tag .Leaving the modification like this:
Now, for everything to work you must apply the property to that particular image
float:left
(margins are optional).It is up to you how to apply that property, whether with a
ID
or within the label with astyle
. If you opt for the second way, it would look like this: