Within the xop-container section, there is a vertical split between two sides; however, I am struggling to use a media query to change the split into horizontal for mobile view.
<section class="xop-container">
<div class="xop-left">
<div style="text-align: center; background-color:#fcc567; margin-left:20%;margin-right:15%;">
<p style="font-size:14px; display:inline-block; padding-left:30%; text-align:left;">Lumeca (Pty) Ltd is an<br/> electrical wholesaler.<br/> We supply industries, contractors and<br/> households with electrical<br/> products and equipment required for<br/><br/>
• Power lines construction and maintenance<br/>
• High, Medium and Low voltage electrification<br/>
• Lighting<br/>
• Cables<br/>
<br/>
We are a Level 1 BBBEE contributor
</p>
</div>
</div>
<div class="xop-right">
<div style="text-align: center; background-color:#fcc567; margin-left:20%;margin-right:15%;">
<p style="font-size:14px; display:inline-block; padding-left:30%; text-align:left;">Lumeca (Pty) Ltd is an<br/> electrical wholesaler.<br/> We supply industries, contractors and<br/> households with electrical<br/> products and equipment required for<br/><br/>
• Power lines construction and maintenance<br/>
• High, Medium and Low voltage electrification<br/>
• Lighting<br/>
• Cables<br/>
<br/>
We are a Level 1 BBBEE contributor
</p>
</div>
</div>
</section>
The styling of the container, left and right div elements can be found in the CSS properties below:
.xop-container {
display: flex;
}
div {
display: flex;
flex-direction: column;
justify-content: center;
}
.xop-left {
background-image: url(../images/city.png);
background-size: cover;
background-position: center;
flex: 1;
padding: 1rem;
transition: all .2s ease-in-out;
}
.xop-right {
background: url(../images/country.png);
background-size: cover;
background-position: center;
flex: 1;
padding: 1rem;
transition: all .2s ease-in-out;
width:100%;
}
Despite implementing two different types of media queries for mobile view, neither seem to be functioning as expected. Can anyone spot where I may have made a mistake?