Making Flexbox Responsive
I'm using flexbox to create rows of 4 items. When I resize screen, everything gets smaller, but I also want row to split up into to 2 rows of 2 instead of 1 row of four. And event
Solution 1:
You need to use @media
to achieve this
.article-wrapper {
display: flex;
justify-content: space-between;
margin-top: 10px;
flex-flow: row wrap;
}
.articles {
margin-top: 20px;
}
.articlesh2 {
width: 100%;
margin-bottom: 20px;
}
.article {
width: 22%;
}
.articleimg {
width: 100%;
}
.article-title {
font-weight: bold;
}
.article-creator {
font-style: italic;
margin-top: 5px;
}
@media screen and (max-width: 767px) {
.article {
width: 50%;
}
}
<sectionclass="articles"><h2>Trending</h2><divclass="article-wrapper"><divclass="article"><imgsrc="https://imagejournal.org/wp-content/uploads/bb-plugin/cache/23466317216_b99485ba14_o-panorama.jpg"alt=""><pclass="article-title">row</p><pclass="article-viewcount">row</p><pclass="article-creator">row</p></div><divclass="article"><imgsrc="https://imagejournal.org/wp-content/uploads/bb-plugin/cache/23466317216_b99485ba14_o-panorama.jpg"alt=""><pclass="article-title">row</p><pclass="article-viewcount">row</p><pclass="article-creator">row</p></div><divclass="article"><imgsrc="https://imagejournal.org/wp-content/uploads/bb-plugin/cache/23466317216_b99485ba14_o-panorama.jpg"alt=""><pclass="article-title">row</p><pclass="article-viewcount">row</p><pclass="article-creator">row</p></div><divclass="article"><imgsrc="https://imagejournal.org/wp-content/uploads/bb-plugin/cache/23466317216_b99485ba14_o-panorama.jpg"alt=""><pclass="article-title">row</p><pclass="article-viewcount">row</p><pclass="article-creator">row</p></div></div></section>
working fiddle here
Post a Comment for "Making Flexbox Responsive"