I've got two columns (using flexbox) and a media query breakpoint. However I've tried the following css attributes to get the columns to be 100% and stack on top of each other when on mobile.
Currently remains as a column, side by side at all times.
width: 100%;
flex-grow: 1;
Code for the container
.flexbox-container {
display: -ms-flex;
display: -webkit-flex;
display: flex;
}
The code for the columns
.flexbox-column {
display: flex;
width: 100%;
padding: 50px;
background-color: yellow;
}
@media (min-width: 768px) {
.flexbox-column {
width: 50%;
background-color: #444;
}
}
My codepen (I don't know how to get the 'Run Code' feature to work on here) https://codepen.io/jordanc26/pen/yjWZQJ
Approach: To create a two-column layout, first we create a <div> element with property display: flex, it makes that a div flexbox and then add flex-direction: row, to make the layout column-wise. Then add the required div inside the above div with require width and they all will come as columns.
The flex-shrink property specifies how much the item will shrink compared to others item inside that container. It defines the ability of an element to shrink in compared to the other elements which are placed inside the same container.
Moving this rule
.flexbox-container {
display: flex;
}
into the mediaquery scope is enough:
in fact, for narrow viewports, both your column elements are not in a flexbox
container anymore, so they will stack on top of each other and they will extend for the entire available width
codepen demo
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With