Within my portfolio, I have a projects section that switches between having the description on the left with an image on the right and vice versa. Despite my efforts to make it responsive, I'm struggling to figure out how to ensure the image appears above the text on each project when viewed on a smartphone.
Here is the HTML for the projects section:
<section id="projects">
<div class="container">
<div class="row projects">
<h1>My Projects</h1>
<div class="col project-desc-left">
<h2>Tindog</h2>
<p>A landing page for the Tindog app - a unique take on dating apps. Built using Bootstrap 5 and HTML/CSS with Bootstrap grids.</p>
<i class="fab fa-html5"></i> <i class="fab fa-css3-alt"></i> <i class="fab fa-bootstrap"></i><br>
<a class="btn button primary-button mr-4 live-site-btn" href="https://kiannaamaya.github.io/TinDog-WebDevBootcamp/" role="button" target="_blank">Live Site</a>
<a class="btn button secondary-button mr-4 github-btn" href="https://github.com/kiannaamaya/TinDog-WebDevBootcamp" role="button" target="_blank">Github Repo</a> </div>
<div class="col col-lg-6 col-sm-12 project-img-right">
<img class="project-img" src="assets/tindog.png">
</div>
</div>
<div class="row projects">
<div class="col">
<img class="project-img" src="assets/nftcard.png">
</div>
<div class="col project-desc-right">
<h2>NFT Preview Card</h2>
<p>A preview card page created using HTML/CSS.</p>
<i class="fab fa-html5"></i> <i class="fab fa-css3-alt"></i> <br>
<a class="btn button primary-button mr-4 live-site-btn" href="https://kiannaamaya.github.io/nft-preview-card-component-main/" role="button" target="_blank">Live Site</a>
<a class="btn button secondary-button mr-4 github-btn" href="https://github.com/kiannaamaya/nft-preview-card-component-main" role="button" target="_blank">Github Repo</a> </div>
</div>
<div class="row projects">
<div class="col project-desc-left">
<h2>3-Card Column</h2>
<p>A preview card showcasing vehicle options designed with HTML/CSS.</p>
<i class="fab fa-html5"></i> <i class="fab fa-css3-alt"></i> </i><br>
<a class="btn button primary-button mr-4 live-site-btn" href="https://kiannaamaya.github.io/3-column-preview-card-component-main/" role="button" target="_blank">Live Site</a>
<a class="btn button secondary-button mr-4 github-btn" href="https://github.com/kiannaamaya/3-column-preview-card-component-main" role="button" target="_blank">Github Repo</a>
</div>
<div class="col project-img-right">
<img class="project-img" src="assets/3colcard.png">
</div>
</div>
</div>
</section>
I attempted to utilize col-xs-12 in Bootstrap 5 for responsiveness, but it resulted in undesirable outcomes and distorted the desktop view. The layout looks satisfactory on a laptop, but other screen sizes are problematic.
This is the CSS styling used:
/* Projects */
#projects {
width: 100%;
}
#projects h1 {
text-align: center;
}
.projects {
margin-left: 0;
}
.project-img{
width: 300px;
}
.project-desc-left {
margin: 5rem;
width: 320px;
}
.project-desc-right {
}
}
Despite spending several days tweaking the code, minimal progress has been made.