Hey there, I'm diving into a new journey in web design and I've encountered my first newbie issue. I'm attempting to place an image and text side by side on my web layout, but as soon as the breakpoint hits below 560px, the image disappears and I can't seem to figure out why. I'm hoping someone out there could lend me a hand. Here's the CSS snippet:
.proposito-img {
background-image: url(../img/competencia.png);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
overflow: visible;
}<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c8aaa7a7bcbbbcbaa9b888fde6f8e6f8e5aaadbca9fa">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<div id="#proposito-1" class="container-md mt-5">
<div class="row">
<div class="col-md-6 proposito-img">
</div>
<div class="col-md-6 fondo-morado texto-blanco g-0 p-5">
<h3 class="fw-bold texto-blanco">
Proposito
</h3>
<p class="justificado">
El estudiante fundamentará la importancia de la epistemología, (rama de la filosofía que
investiga sobre el conocimiento científico y expresa en teorías el resultado de esas
investigaciones). Con la finalidad de investigar los fundamentos de la educación como
construcción social de la realidad y sobre la condición educable del hombre.
</p>
</div>
</div>
</div>