Right side of the Image not fit in mobile browser window - html

I made a few 400x300 pixel image. Each of them contains a letter with a border around them. If I open in mobile browser the the image is bigger than the screen. I tried it in Chrome, Firefox, Opera browser, same results. The problem only exists on mobile phone. No problem on desktop computer even in responsive view.
If I set a lower minimum value, let's say 300px, then the picture fit to the display.
grid-template-columns: repeat(auto-fill, minmax(400px,1fr));
My phone's display is 720px wide so I don't know why the right side is not visible if I set it to 400px.
I uploaded the html to this website
On my phone this is the result
My goal is to fit the content to the display on any phone without scrolling.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
*{
box-sizing: border-box;
margin: 0;
padding: 0;
}
body{
background-color: gray;
}
.container{
display: grid;
gap: 10px;
grid-template-columns: repeat(auto-fill, minmax(400px,1fr));
width: 100%;
}
.card{
background-color: lightgray;
}
.card img{
display: block;
width: 100%;
/* object-fit: contain; */
}
</style>
</head>
<body>
<div class="container">
<div class="card">
<img src="a.png" alt="">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="card">
<img src="b.png" alt="">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="card">
<img src="c.png" alt="">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="card">
<img src="d.png" alt="">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="card">
<img src="e.png" alt="">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
</body>
</html>


.card img{
display: block;
width: 100vw;
}
Using vw (viewport width) will fix this problem.
(Or you can also remove the initial-scale=1.0 from your viewport meta tag.)

Related

Other divs overlap behind if I use percentages

I am experiencing a problem in CSS where my other divs overlap to the image above if I use percentages, for px I have no problem and the divs stay in place. I want the image to be in full-width size though as like a hero image and want it responsive in all screen sizes.
Screenshot of site
.img-slider{
position: relative;
width: 100%;
height: 300px;
margin-bottom: 90px;
background: #18191C;
}
.img-slider .slide{
z-index: 1;
position: absolute;
width: 100%;
clip-path: circle(0% at 0 50%);
}
.img-slider .slide.active{
clip-path: circle(150% at 0 50%);
transition: 1.3s;
transition-property: clip-path;
}
.img-slider .slide img{
z-index: 1;
width: 100%;
width: 100%;
border-radius: 5px;
}
<div class="img-slider">
<div class="slide active">
<img src="images/Thumb/img1.png" alt="">
<div class="info">
<h2>Native Fixtures</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<div class="slide">
<img src="images/Thumb/img2.png" alt="">
<div class="info">
<h2>Slide 02</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<div class="slide">
<img src="3.jpg" alt="">
<div class="info">
<h2>Slide 03</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<div class="slide">
<img src="4.jpg" alt="">
<div class="info">
<h2>Slide 04</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<div class="slide">
<img src="5.jpg" alt="">
<div class="info">
<h2>Slide 05</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>

If you use flex box with the justify-content:space-around setting and flex-grow you can create the effect your looking for.
https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Keeping 3 cards in same row using grid

I created a list of cards using grid. The CSS:
body {
padding: 40px 0;
}
.grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
grid-gap: 20px;
align-items: stretch;
}
.grid > article {
border: 1px solid #ccc;
box-shadow: 2px 2px 6px 0px rgba(0, 0, 0, 0.3);
}
.grid > article img {
max-width: 100%;
}
.grid .text {
padding: 20px;
}
The HTML:
<div id="app" class="container">
<div class="grid">
<article v-for="tool in tools">
<div class="title">
<h3>{{capitalizeFirstLetter(tool.name)}}</h3>
</div>
<div class="description">
{{tool.description}}
</div>
</article>
</div>
</div>
How do I keep up to 3 cards per row? I can't seem to understand how should I treat the grid so I will keep maximum 3 cards per row. For example I have 8 elements, then It will be:
card card card
card card card
card card

Change grid-template-columns property auto-fill to 3.
body {
padding: 40px 0;
}
.grid {
display: grid;
grid-template-columns: repeat(3, minmax(280px, 1fr));
grid-gap: 20px;
align-items: stretch;
}
.grid>article {
border: 1px solid #ccc;
box-shadow: 2px 2px 6px 0px rgba(0, 0, 0, 0.3);
}
.grid>article img {
max-width: 100%;
}
.grid .text {
padding: 20px;
}
<div id="app" class="container">
<div class="grid">
<article>
<div class="title">
<h3>Title</h3>
</div>
<div class="description">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</article>
<article>
<div class="title">
<h3>Title</h3>
</div>
<div class="description">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</article>
<article>
<div class="title">
<h3>Title</h3>
</div>
<div class="description">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</article>
<article>
<div class="title">
<h3>Title</h3>
</div>
<div class="description">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</article>
<article>
<div class="title">
<h3>Title</h3>
</div>
<div class="description">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</article>
<article>
<div class="title">
<h3>Title</h3>
</div>
<div class="description">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</article>
<article>
<div class="title">
<h3>Title</h3>
</div>
<div class="description">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</article>
<article>
<div class="title">
<h3>Title</h3>
</div>
<div class="description">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</article>
</div>
</div>

Horizontal scroll with css grid

I'm having a problem when I am trying to make a horizontal scroll when the grid complete four columns. See
#series {
display: grid;
grid-gap: 16px;
overflow-x: scroll;
padding: 16px;
grid-template-columns: repeat(4, 1fr);
grid-auto-flow: column;
}
Using this I get below output
But, you know, I want to get same like "four columns" and a scroll bar for see more.
What's the problem.

Try it with this:
display: grid;
grid-gap: 16px;
padding: 16px;
grid-template-columns: repeat(auto-fill,minmax(160px,1fr));
grid-auto-flow: column;
grid-auto-columns: minmax(160px,1fr);
overflow-x: auto;
grid-auto-flow: column; will force the grid to add your elements as column instead of following the free space.
grid-auto-columns: minmax(160px,1fr); the items added outside the viewport do not match auto-fit, so they won't get the size defined in your template. So you have to define it again with grid-auto-columns.
overflow-x: auto; auto will add the scrollbar

Horizontal scrolling containers the right way! Source
:root {
--gutter: 20px;
}
.app {
padding: var(--gutter) 0;
display: grid;
grid-gap: var(--gutter) 0;
grid-template-columns: var(--gutter) 1fr var(--gutter);
align-content: start;
}
.app > * {
grid-column: 2 / -2;
}
.app > .full {
grid-column: 1 / -1;
}
.hs {
display: grid;
grid-gap: calc(var(--gutter) / 2);
grid-template-columns: 10px repeat(6, calc(50% - var(--gutter) * 2)) 10px;
grid-template-rows: minmax(150px, 1fr);
overflow-x: scroll;
scroll-snap-type: x proximity;
padding-bottom: calc(.75 * var(--gutter));
margin-bottom: calc(-.5 * var(--gutter));
}
.hs:before,
.hs:after {
content: '';
}
/* Hide scrollbar */
.hide-scroll {
overflow-y: hidden;
margin-bottom: calc(-.1 * var(--gutter));
}
/* Demo styles */
html,
body {
height: 100%;
}
body {
display: grid;
place-items: center;
background: #456173;
}
ul {
list-style: none;
padding: 0;
}
h1,
h2,
h3 {
margin: 0;
}
.app {
width: 375px;
height: 667px;
background: #DBD0BC;
overflow-y: scroll;
}
.hs > li,
.item {
scroll-snap-align: center;
padding: calc(var(--gutter) / 2 * 1.5);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background: #fff;
border-radius: 8px;
}
<div class="app">
<h1>Some headline</h1>
<div class="full hide-scroll">
<ul class="hs">
<li class="item">test</li>
<li class="item">test</li>
<li class="item">test</li>
<li class="item">test</li>
<li class="item">test</li>
<li class="item">test</li>
</ul>
</div>
<div class="container">
<div class="item">
<h3>Block for context</h3>
</div>
</div>
</div>

try this:
.container{
display: grid;
grid-auto-columns: max-content;
grid-template-rows: 1fr;
width: 100%;
overflow-x: auto;
}
.child{
grid-row: 1;
grid-column: auto;
}

Your problem is that you are using 1fr unit. Instead put 25% (use calc to accommodate for any gaps). This will size your columns relative to available screen width. Of course you must apply 25% to grid-auto-columns also.

I faced a similar issue recently and none of the answers seemed to solve this the way I needed.
Here's my take on this:
body {
background-color: #e2e2e2;
}
h1,
h2 {
text-align: center;
}
.cards {
/* How many columns to show. */
--visible-cols: 4;
/* Gap between columns. */
--col-gap: 20px;
/* How much to show of the next hidden column. You can use this as a hint to show the user that there are more scrollable items. Particularly helpful for mobile devices where the scrollbar gets hidden by default.*/
--col-hint: 0px;
/* Whitespace between the elements and the scrollbar. */
--scrollbar-padding: 20px;
/* Calculated column size. */
--col-size: calc((100% / var(--visible-cols)) - var(--col-gap) - var(--col-hint));
display: grid;
grid-auto-flow: column;
grid-template-columns: var(--col-size);
grid-auto-columns: var(--col-size);
overflow-x: auto;
overflow-y: hidden;
grid-gap: var(--col-gap);
padding-bottom: var(--scrollbar-padding);
margin: 30px 0;
}
.cols-5,
.desktop-cols-5 {
--visible-cols: 5;
}
.cols-3 {
--visible-cols: 3;
}
.hint-next {
--col-hint: 20px
}
#media (max-width: 1024px) {
.laptop-cols-3 {
--visible-cols: 3;
}
}
#media (max-width: 767px) {
.tablet-cols-2 {
--visible-cols: 2;
}
.tablet-hint-next {
--col-hint: 15px
}
}
#media (max-width: 425px) {
.mobile-cols-1 {
--visible-cols: 1;
}
.mobile-hint-next {
--col-hint: 10px
}
}
.card {
display: flex;
flex-flow: column nowrap;
background-color: lightblue;
justify-content: center;
align-items: center;
padding: 10px;
border-radius: 10px;
min-height: 250px;
overflow: hidden;
}
.card-title,
.card-desc {
flex: 1;
border-radius: 10px;
}
.card-title {
font-size: 1.2em;
font-weight: bold;
}
.card-desc {
padding: 20px;
background-color: orange;
}
<div class="main">
<h1>CSS Grid - Scrollable Horizontal Layout Example</h1>
<h2>4 Columns</h2>
<div class="cards">
<div class="card">
<div class="card-title">Card 1</div>
<div class="card-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
<div class="card">
<div class="card-title">Card 2</div>
<div class="card-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
<div class="card">
<div class="card-title">Card 3</div>
<div class="card-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
<div class="card">
<div class="card-title">Card 4</div>
<div class="card-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
<div class="card">
<div class="card-title">Card 5</div>
<div class="card-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
<div class="card">
<div class="card-title">Card 6</div>
<div class="card-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
<div class="card">
<div class="card-title">Card 7</div>
<div class="card-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
<div class="card">
<div class="card-title">Card 8</div>
<div class="card-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
<div class="card">
<div class="card-title">Card 9</div>
<div class="card-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
<div class="card">
<div class="card-title">Card 10</div>
<div class="card-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
</div>
<h2>3 Columns - Hint Next</h2>
<div class="cards cols-3 hint-next">
<div class="card">
<div class="card-title">Card 1</div>
<div class="card-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
<div class="card">
<div class="card-title">Card 2</div>
<div class="card-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
<div class="card">
<div class="card-title">Card 3</div>
<div class="card-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
<div class="card">
<div class="card-title">Card 4</div>
<div class="card-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
<div class="card">
<div class="card-title">Card 5</div>
<div class="card-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
<div class="card">
<div class="card-title">Card 6</div>
<div class="card-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
<div class="card">
<div class="card-title">Card 7</div>
<div class="card-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
<div class="card">
<div class="card-title">Card 8</div>
<div class="card-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
<div class="card">
<div class="card-title">Card 9</div>
<div class="card-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
<div class="card">
<div class="card-title">Card 10</div>
<div class="card-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
</div>
<h1>Responsive Example</h1>
<h2>Desktop - 5 Columns</h2>
<h2>Laptop - 3 Columns</h2>
<h2>Tablet - 2 Columns - Hint Next</h2>
<h2>Mobile - 1 Column - Hint Next</h2>
<div class="cards desktop-cols-5 laptop-cols-3 tablet-cols-2 tablet-hint-next mobile-cols-1 mobile-hint-next">
<div class="card">
<div class="card-title">Card 1</div>
<div class="card-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
<div class="card">
<div class="card-title">Card 2</div>
<div class="card-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
<div class="card">
<div class="card-title">Card 3</div>
<div class="card-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
<div class="card">
<div class="card-title">Card 4</div>
<div class="card-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
<div class="card">
<div class="card-title">Card 5</div>
<div class="card-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
<div class="card">
<div class="card-title">Card 6</div>
<div class="card-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
<div class="card">
<div class="card-title">Card 7</div>
<div class="card-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
<div class="card">
<div class="card-title">Card 8</div>
<div class="card-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
<div class="card">
<div class="card-title">Card 9</div>
<div class="card-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
<div class="card">
<div class="card-title">Card 10</div>
<div class="card-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
</div>
</div>
The important bit being:
.cards {
/* How many columns to show. */
--visible-cols: 4;
/* Gap between columns. */
--col-gap: 20px;
/* How much to show of the next hidden column. You can use this as a hint to show the user there are more scrollable items. Particularly helpful for mobile devices where the scrollbar gets hidden by default.*/
--col-hint: 0px;
/* Whitespace between the slider and the scrollbar. */
--scroller-padding: 20px;
/* Calculated column size. */
--col-size: calc((100% / var(--visible-cols)) - var(--col-gap) - var(--col-hint));
display: grid;
grid-auto-flow: column;
grid-template-columns: var(--col-size);
grid-auto-columns: var(--col-size);
overflow-x: auto;
overflow-y: hidden;
grid-gap: var(--col-gap);
padding-bottom: var(--scroller-padding);
}
It can be very easily made responsive by adjusting the relevant CSS properties for each screen size. I have included a responsive example as well.
You can also check this as a codepen here: https://codepen.io/amyriounis/pen/VwyydGj

I think this medium article has the answer:
https://uxdesign.cc/creating-horizontal-scrolling-containers-the-right-way-css-grid-c256f64fc585
Basically it comes down to the fact that the individual cards need to have a fixed width instead of a dynamic one, in order to force the browser to not squish them together.

Flex: Image top, text bottom. Expand remaining height with aspect ratio image.

I'm trying to create a simple design, image on top, text underneath. I'm using flexbox.
I want to keep the images the same ratio so I'm using the padding top aspect ratio hack to do so, that works well.
What I'm struggling with is getting the text box beneath the image to take up the rest of the remaining space in the container. I was hoping that flexbox would make this easy but I think using it in conjunction with the aspect ratio hack is causing issues.
Here's a fiddle of the basic layout https://codepen.io/anon/pen/NEqdyN. Can anyone help me make each of the red boxes expand to fill the remaining height? I also need to add a border radius the bottom of each corner so I can't use the overflow hidden method.
Thanks in advance!
Code below
<div class="container">
<div class="card">
<div class="image-wrapper">
<img src="https://via.placeholder.com/350x150?Text=Image">
</div>
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</div>
<div class="card">
<div class="image-wrapper">
<img src="https://via.placeholder.com/350x150?Text=Image">
</div>
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</div>
<div class="card">
<div class="image-wrapper">
<img src="https://via.placeholder.com/350x150?Text=Image">
</div>
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<br><br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</div>
</div>
CSS
body {
margin: 0;
}
.container {
display: flex;
}
.card {
width: 30%;
margin: 0 1%
}
.image-wrapper {
height: 0;
padding-bottom: 56.25%;
position: relative;
}
img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
position: absolute;
top: 0;
left: 0;
}
.text {
background: red;
padding: 20px
}

It should work by defining a flex container on each card and using flex: 1 0 auto on text blocks.
.card {
display: flex;
flex-direction: column;
}
.text {
flex: 1 0 auto;
}
Demo
body {
margin: 0;
}
.container {
display: flex;
}
.card {
display: flex;
flex-direction: column;
width: 30%;
margin: 0 1%;
}
.image-wrapper {
height: 0;
padding-bottom: 56.25%;
position: relative;
}
img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
position: absolute;
top: 0;
left: 0;
}
.text {
background: red;
padding: 20px;
flex: 1 0 auto;
}
<div class="container">
<div class="card">
<div class="image-wrapper">
<img src="https://via.placeholder.com/350x150?Text=Image">
</div>
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</div>
<div class="card">
<div class="image-wrapper">
<img src="https://via.placeholder.com/350x150?Text=Image">
</div>
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</div>
<div class="card">
<div class="image-wrapper">
<img src="https://via.placeholder.com/350x150?Text=Image">
</div>
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<br><br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</div>
</div>

Triangle on a div bottom

I have a problem with taking a triangle on a bottom of div, as you can see in image below. This three div's are in flexbox.
HTML code:
<section class="main_content">
<div class="1st_class">
<div class="features">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.</p>
<div class="triangle"></div>
</div>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>

If you want a flexible solution I would recommend using an SVG background image of a triangle and then stretching it across the bottom of the box.
I have created a jsFiddle to show what I mean.
.active:after {
content: '';
position: absolute;
bottom: -15px;
left: 0;
width: 100%;
height: 15px;
background-size: 100% 100%;
background-image: url(triangle.svg);
}