What's Currently Happening: While using the Chrome browser's device toolbar tool to test my site at various resolutions, I observed that when I shrink the device screen to "Mobile-s" 320px, the content on my page becomes nearly unreadable. Additionally, the images become extremely small, and sentences get broken down to the point where single letters are stacked on top of each other.
Desired Outcome: I would like the content in the card to shrink as the screen resolution decreases, but remain readable with the images staying large enough to be visible.
Tools Used in My Project:
- HTML
- CSS
- Bootstrap 5
HTML for the Blog Section:
You can see that I'm utilizing container-fluid in my outermost div.
<h2 class="display-6 mb-5">My blog:</h2>
<div class="container-fluid">
<div class="row">
<div class="col-md-4 ">
<div class="card " >
<img src="img/1.jpg" class="card-img-top " alt="...">
<div class="card-body ">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
HTML for the Images Section:
You can see that I'm also using container-fluid in my outermost div.
<h2 class="display-6">My projects:</h2>
<div class="container-fluid">
<div class="row gy-5">
<div class="col-md-6"><img src="img/1.jpg" alt="Portfolio image" class="img-fluid thumbnail">
</div>
<div class="col-md-6"><img src="img/1.jpg" alt="Portfolio image" class="img-fluid thumbnail">
</div>
<div class="col-md-6"><img src="img/1.jpg" alt="Portfolio image" class="img-fluid thumbnail">
</div>
<div class="col-md-6"><img src="img/1.jpg" alt="Portfolio image" class="img-fluid thumbnail">
</div>
<div class="col-md-6"><img src="img/1.jpg" alt="Portfolio image" class="img-fluid thumbnail">
</div>
<div class="col-md-6"><img src="img/1.jpg" alt="Portfolio image" class="img-fluid thumbnail">
</div>
CSS Included in My Project:
body, html{
height: 100%;
}
body{
font-weight: 200;
font-size: 1.5rem;
color: #444;
}
.intro-left{
background: url("img/1.jpg");/*concrete background*/
position: fixed;
left: 0;
width: 33.3333%;
height: 100%;
color: white;
}
@media(max-width: 768px) {
.intro-left{
height: 80vh;
margin-bottom: 0;
position: relative;
width: 100%;
}
}
.avatar{
width: 10rem;
height: 7em;
border-radius: 50%;
margin: 1rem;
}
.full-height {
height: 100%;
}
.quote{
float: right;
}
section{
margin: 5rem;
font-size: 1.2rem;
}
a{
color: #444;
text-decoration: none;
}
How the Cards Currently Appear at 320px:
https://i.sstatic.net/az4li.png
How the Images Currently Look at 320px:
https://i.sstatic.net/niPLJ.png
Expected Appearance of Cards at 320px:
https://i.sstatic.net/187ZD.png
Expected Appearance of Images at 320px: