I've recently completed my online portfolio, and it appears to be functioning properly on desktop computers. However, I'm encountering responsiveness issues when viewing it on other devices or smartphones. Even though I have included the necessary meta tags in my code and implemented a media query in my CSS file, the problem persists. My online portfolio is built using Bootstrap and external CSS. Additionally, I'm facing an issue with horizontal scrolling on mobile devices.
PS. Some crucial information has been omitted from the text.
Below is the problematic code snippet:
<div class="container">
<h2 class="text-center p-3">PROJECTS</h2>
<div class="row">
<div class="col-md-7 text-center">
<h5 class="educare">Title</h5>
<p class="text-justify py-1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
<p class="text-center py-1 tech-stack">
Tech Stack:
<img src="https://img.icons8.com/doodle/48/000000/squarespace.png"/>
<img src="https://img.icons8.com/ios-filled/50/000000/html.png"/>
<img src="https://img.icons8.com/ios-filled/50/000000/css.png"/>
</p>
</div>
<div class="col-md-1 text-left order-md-last order-sm-first">
<img src="..." class="educ-image">
</div>
</div>
<div class="row">
<img src="./images/venture.gif" class="mr-auto venture-gif">
<div class="col-md-7 text-center">
<h5 class="venture-txt">Venture Capital Funds Website</h5>
<p class="text-justify py-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
<p class="text-center py-1 tech-stack">
Tech Stack:
<img src="https://img.icons8.com/windows/32/000000/wix.png"/>
<img src="https://img.icons8.com/ios-filled/50/000000/adobe-photoshop--v1.png"/>
<img src="https://img.icons8.com/ios-filled/50/000000/adobe-illustrator.png"/>
</p>
</div>
</div>
</div>