I was trying to leave a container with one row and two columns to be able to generate a division as seen between the colors black and emerald, the idea is that on the left side there is an image (square) with the mail below the image and the There is an explanatory text on the right side , the difficulty I encountered is that my text is not adapting to the screen change , I thought it would adapt directly to the change along with the container
Minimum Verifiable Example https://github.com/Batvizz/ProblemExample
<h2 class="page-section-heading text-center text-uppercase text-secondary mt-5 "id="categoria1">About me</h2>
<div class="divider-custom">
<div class="divider-custom-line"></div>
<div class="divider-custom-icon"><i class="fas fa-star"></i></div>
<div class="divider-custom-line"></div>
</div>
<div class="container-fluid bg-warning" id="about" >
<div class="row">
<div class="col-sm bg-secondary">
<img class="img-responsive" class="ms-5" src="imagenes/omoiavatar.png" alt="png" />
<a href="mailto:[email protected]"><p class="px-5">bygmail.com</p></a>
</div>
<div class="col-md bg-primary">
<p>sdasdasdasdasdasdasdasdasdasdasdasdasdasdassdñlfkgjdslkfgjdlskfgjdslñkfgjlsñdkfgjldñskfgjdlsñkfgjdasdasdasdasdasdasdasd</p>
<p>sdasdasdasdasdasdasdasdasdasdasdasdasdasdassdñlfkgjdslkfgjdlskfgjdslñkfgjlsñdkfgjldñskfgjdlsñkfgjdasdasdasdasdasdasdasd</p>
<p>sdasdasdasdasdasdasdasdasdasdasdasdasdasdassdñlfkgjdslkfgjdlskfgjdslñkfgjlsñdkfgjldñskfgjdlsñkfgjdasdasdasdasdasdasdasd</p>
<p>sdasdasdasdasdasdasdasdasdasdasdasdasdasdassdñlfkgjdslkfgjdlskfgjdslñkfgjlsñdkfgjldñskfgjdlsñkfgjdasdasdasdasdasdasdasd</p>
</div>
</div>
</div>
Some images to guide you
I have modified your code.
For the column containing the image use class="col-md-4" and for the text class="col-md-8".
The container must have
p-3
, and to group to the centertext-center
:Give your paragraphs the lead class: