Quantcast
Channel: Active questions tagged flexbox - Stack Overflow
Viewing all articles
Browse latest Browse all 1305

How can I make a card like this which is responsive in HTML/CSS

$
0
0

I would like to make a card (image 1) which is fully responsive and can support two cards sitting to the left of it for a total of three cards on a website I am building (image 2). I've coded this up without responsiveness but I am struggling to get a responsive card. Any help is great, thank you!

JSFiddle:https://jsfiddle.net/brax/2o01k7ps/

.alignment2 {  display: flex;  justify-content: space-between;  column-gap: 20px;  padding-bottom: 6%;}.container {  padding: 2px 16px;}.card2 {  box-shadow: 0 5px 13px 0 #000;  border-radius: 15px;  background-color: #121212;  border-color: #121212;  height: 188px;}.card2:hover {  box-shadow: 0 8px 16px 0 000;}.card2 img {  width: 50%;  float: left;  border-radius: 15px 0px 0px 15px;  margin-right: 20px;  display: inline;}.card2 h3 {  display: inline;}.card2 h4 {  display: inline;  font-size: 24px;  color: white;}.card2 p {  display: inline;  font-size: 18px;  color: white;  padding-top: 20px;}.card2 .link-a {  display: inline;  margin-top: 35px;  font-size: 12px;  font-weight: 700;  text-transform: uppercase;  text-decoration: none;}
<div class="alignment2"><div class="card2"><img src="https://dummyimage.com/300x300" alt="Avatar"><div class="container"><h4>Lorem Ipsum</h4><br><br><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor</p><br><br><p class="link-a" style="font-size: 15px;"><a href="link">CTA Link</a></p></div></div><div class="card2"><img src="https://dummyimage.com/300x300" alt="Avatar"><div class="container"><h4>Lorem Ipsum</h4><br><br><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor</p><br><br><p class="link-a" style="font-size: 15px;"><a href="link">CTA Link</a></p></div></div></div>

Image 1

enter image description here

Image 2

enter image description here


Viewing all articles
Browse latest Browse all 1305

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>