How can I make an image take 100% width in smaller screens? - css

Question

I am making an news blog. I have created my main article cards. The cards have an image to the left of the card, and with the card having the main content like the title, brief description, author and date.
Everything works when the browser is maximized (I'm on a 13 inch laptop). As I start resizing my browser and making it smaller, everything starts to kind of break. The image does not take up the full width, and has a lot of white space to the right of it.
I tried giving the image width of 100%, but it does not seem to fix the problem. I am not sure what is wrong and why this is happening. This is only happening to these article cards. Everything else on the homepage works correctly even on smaller sized screens.
If you have some time, can you explain what is happening, and how to solve this problem? Please and thank you.
Screenshots:
Large+ Screens
As I start resizing the browser window and making it smaller it does this:
And finally the phone sized screens:
HTML
<div class="card card-article">
<div class="row no-gutters right-shadow-games">
<div class="col-auto">
<img alt="" class="img-fluid" src="//placehold.it/200x200"> <a class="article-tag games" href="#">Games</a>
</div>
<div class="col">
<div class="card-block">
<div class="row">
<div class="col-md-12">
<h4 class="card-title">How Did van Gogh’s Turbulent Mind Depict One of the Most Complex Concepts in Physics?</h4>
</div>
</div>
<div class="row">
<div class="col-md-12">
<p class="card-description">Pick the yellow peach that looks like a sunset with its red, orange, and pink coat skin, peel it off with your teeth. Sink them into unripened...</p>
</div>
</div>
<div class="row">
<div class="col-md-9">
<p class="card-author">Author on Sep 29, 2017</p>
</div>
</div>
</div>
</div>
</div>
</div>
CSS
.card-article {
margin-top: 2px;
margin-bottom: 5px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
.card-article .card-title{
margin-top: 15px;
margin-left: 15px;
margin-right: 10px;
font-size: 18px;
}
.card-article .card-author{
margin-left: 15px;
margin-right: 10px;
color: #8d8d8d;
font-size: 12px;
line-height: 1.4;
}
.card-article .card-title a{
color: black;
font-weight: 600;
}
.card-article .card-description{
margin-left: 15px;
margin-right: 10px;
color: #8d8d8d;
font-size: 14px;
line-height: 1.4;
}
For give the messy CSS I could definitely clean it up a little bit.

Answer 1

Here, the image will resized to 100% width at 640px media width. I think it is better when you could change the image size to something bigger (as per 100% width point) to get maximum picture clarity.
.card-article {
margin-top: 2px;
margin-bottom: 5px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
.card-article .card-title {
margin-top: 15px;
margin-left: 15px;
margin-right: 10px;
font-size: 18px;
}
.card-article .card-author {
margin-left: 15px;
margin-right: 10px;
color: #8d8d8d;
font-size: 12px;
line-height: 1.4;
}
.card-article .card-title a {
color: black;
font-weight: 600;
}
.card-article .card-description {
margin-left: 15px;
margin-right: 10px;
color: #8d8d8d;
font-size: 14px;
line-height: 1.4;
}
.article-tag.games {
position: absolute;
left: 10px;
top: 10px;
background: red;
padding: 2px 5px;
color: white;
border-radius: 4px;
}
.col-auto img {
max-width:200px;
}
#media (max-width: 640px) {
.col-auto {
width:100%;
max-width:100% !important;
}
.col-auto img {
width:100%;
max-width:100%;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<div class="card card-article">
<div class="row no-gutters right-shadow-games">
<div class="col-auto">
<img alt="" class="img-fluid" src="//placehold.it/640x640"> <a class="article-tag games" href="#">Games</a>
</div>
<div class="col">
<div class="card-block">
<div class="row">
<div class="col-md-12">
<h4 class="card-title">How Did van Gogh’s Turbulent Mind Depict One of the Most Complex Concepts in Physics?</h4>
</div>
</div>
<div class="row">
<div class="col-md-12">
<p class="card-description">Pick the yellow peach that looks like a sunset with its red, orange, and pink coat skin, peel it off with your teeth. Sink them into unripened...</p>
</div>
</div>
<div class="row">
<div class="col-md-9">
<p class="card-author">Author on Sep 29, 2017</p>
</div>
</div>
</div>
</div>
</div>
</div>

Answer 2

What's happening is your image is exactly 200x200px, so it can't stretch when your page changes shape. You could find a different image (I don't recommend this - just putting it out there), or you could try adding a media query for another stylesheet on variable width devices, then resetting the height/width on those.

Answer 3

Use col-md-4 to image wrap div instead col-auto (see fidlle:https://jsfiddle.net/yemd0qnt/3/)
.card-article {
margin-top: 2px;
margin-bottom: 5px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
.card-article .card-title{
margin-top: 15px;
margin-left: 15px;
margin-right: 10px;
font-size: 18px;
}
.card-article .card-author{
margin-left: 15px;
margin-right: 10px;
color: #8d8d8d;
font-size: 12px;
line-height: 1.4;
}
.card-article .card-title a{
color: black;
font-weight: 600;
}
.card-article .card-description{
margin-left: 15px;
margin-right: 10px;
color: #8d8d8d;
font-size: 14px;
line-height: 1.4;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<div class="card card-article">
<div class="row no-gutters right-shadow-games">
<div class="col-md-4">
<img alt="" class="img-fluid" src="//placehold.it/200x200"> <a class="article-tag games" href="#">Games</a>
</div>
<div class="col">
<div class="card-block">
<div class="row">
<div class="col-md-12">
<h4 class="card-title">How Did van Gogh’s Turbulent Mind Depict One of the Most Complex Concepts in Physics?</h4>
</div>
</div>
<div class="row">
<div class="col-md-12">
<p class="card-description">Pick the yellow peach that looks like a sunset with its red, orange, and pink coat skin, peel it off with your teeth. Sink them into unripened...</p>
</div>
</div>
<div class="row">
<div class="col-md-9">
<p class="card-author">Author on Sep 29, 2017</p>
</div>
</div>
</div>
</div>
</div>
</div>

Answer 4

You can 100% image width with use Media Queries for mobile.
#media (max-width: 575px) {
.img-fluid{width:100%;}
}