I'm stumped, I can't seem to find the right CSS element to trigger the transition from displaying the image on the right to below the text. It's a simple change that I didn't anticipate, but I kind of like it.
In horizontal view, I want the image to maintain a specific size regardless of its resolution, with rounded corners on the right side.
When in vertical view, I want the image to span the full width of the card with rounded corners on the bottom.
Question: What CSS property dictates the shift from the image being on the right to below the text?
https://i.sstatic.net/68VMb.png
https://i.sstatic.net/2sSri.png
EXTRA THOUGHTS
One solution could involve separate CSS rules: one for the image on the right with fixed dimensions and rounded corners, and another for the image below the text with dynamic dimensions.
Another option is to keep the image on the right and adjust its width while letting the height expand based on the text length.
A snippet from my style.css might look like:
.image-round-right {
width:350px;
max-height:auto;
border-radius:0px 5px 5px 0px;
}
.image-round-bottom {
width:auto;
height:auto;
border-radius:5px 5px 0px 0px;
}
- Choosing between 'auto' and '100%' might require some testing.
I attempted to use media queries similar to this example, but didn't see the desired changes take effect.
(original html, posted after amruth shared his answer)
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet" />
<body>
<div class="container-fluid">
<div class="card flex-md-row mb-4 box-shadow h-md-250 m-3">
<div class="card-body d-flex flex-column align-items-start flex-grow-1 pr-md-3">
<h3>Card Title</h3>
<p class="card-text mb-auto">
Additional Text. Additional Text. Additional Text. Additional Text. Additional Text. Additional Text. Additional Text. Additional Text. Additional Text.
</p>
</div>
<div class="img-round-right">
<a href="https://www.yahoo.com" title="" target="_blank">
<img src=http://www.independentmediators.co.uk/wp-content/uploads/2016/02/placeholder-image.jpg
class="img-fluid" style="width:auto;height:250px;border-radius:0px 5px 5px 0;">
</a>
</div>
</div>
</div>
</body>