I'm currently utilizing flexbox along with media queries to define maximum and minimum widths for my elements. Everything is running smoothly so far, but in order to achieve the desired layout at a min-width of 1000px, I had to introduce an additional container for two elements to be displayed in a column layout within the row layout applied to the rest of the page.
This setup works well, however, once the width falls below 1000px, I want the container to disappear and have the normal rules apply to the affected elements. I've attempted setting the container to display:none, but that simply removes the elements altogether. I'm struggling to find a solution to this issue as it's quite specific and hasn't been addressed yet.
Here's how it appears above 1000px:
Below 1000px:
And when viewed on iPhone/Tablet (largeContainer disappears behind the #content container):
#content {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.articleImage {
order: 1;
width: 48%;
margin-left: 10px;
height: 250px;
}
article {
position: relative;
text-align: center;
}
article a {
color: white;
text-decoration: none;
position: absolute;
top: 35%;
bottom: 50%;
transform: translate(13%, 50%);
font-weight: bold;
font-size: 1.5em;
text-shadow: black 1px 1px 2px;
padding: 2px;
}
article img {
width: 100%;
border-radius: 10px;
}
.reasons {
order: 2;
border: solid 1px #f77f00;
border-radius: 10px;
margin-left: 10px;
margin-bottom: 10px;
padding: 10px;
}
@media only screen and (min-width: 1000px) {
#content {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.largeContainer {
display: flex;
flex-direction: column;
width: 26.1%;
}
.articleImage {
order: 1;
width: 100%;
height: auto;
}
article {
font-size: small;
margin-right: 10px;
}
article a {
position: absolute;
top: 25%;
bottom: 50%;
transform: translate(5%, 50%);
}
.reasons {
order: 2;
font-size: .85em;
width: 100%;
height: auto;
border: solid 1px #f77f00;
border-radius: 10px;
}
}<div id="content">
<div class="largeContainer">
<div class="articleImage">
<article>
<a href="https://www.theodysseyonline.com/20-reasons-should-eat-mac-cheese" target="_blank">20 Reasons You Should Eat
<br>Mac and Cheese Right Now</a>
<img src="https://th.bing.com/th/id/OIP.TRKuAA8Nt1iBs76N6HDM-AAAAA?pid=ImgDet&rs=1" alt="Fabulous Mac">
</article>
</div>
<div class="reasons">
<h3>What's so Great about Mac and Cheese??</h3>
<ol>
<li>It's a wholesome dish</li>
<li>Cheese is good for the soul</li>
<li>Just look at it</li>
<li>It'll make you the star of any potluck</li>
</ol>
</div>
</div>
</div>Yes, it's a landing page dedicated to Mac and Cheese! In this scenario, I would like the example to showcase the elements in a row similar to the primary container when the width is under 1000px, yet it's not resetting even though .largeContainer isn't defined in the main CSS code. Your assistance is greatly appreciated!