Hello Rashida,
I fixed the issue by adding the following CSS to my cusomt.css file override the template.css classes.
.article-list.articles-leading .article .article-body {
flex: 1 1 0;
}
.article-list .article .article-feature-gallery, .article-list .article .article-featured-audio, .article-list .article .article-featured-video, .article-list .article .article-intro-image {
flex: 1 1 0;
}
This is the original CSS from the template.css file line 549:
.article-list.articles-leading .article .article-body {
padding-right: 30px;
}
This is the original CSS from the template.css file line 580:
.article-list .article .article-feature-gallery, .article-list .article .article-featured-audio, .article-list .article .article-featured-video, .article-list .article .article-intro-image {
margin: 0;
border-radius: 0;
border-bottom: 0;
overflow: hidden;
}
Seems the additon of flex: 1 1 0; is necessary to make sure these divs are evenly spaced. If you inspect element in Chrome and add additonal text to the titles and intro text on the demo here: http://demo2.joomshaper.com/2019/dentro/index.php/blog you can see the images change size there as well.
May be worth adding flex: 1 1 0; to those classes in a future update.
Kind regards,
John