Can anyone assist me with my code? Here is the current version:
https://i.stack.imgur.com/00RGC.png
I want it to resemble this:
https://i.stack.imgur.com/JSclD.png
You can find all my attempted media queries in the CSS comments at the end. Please let me know where I went wrong and how to achieve the desired appearance. Thank you in advance.
#wrap {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
@media screen and (max-width: 1300px) {
flex-wrap: wrap;
}
}
/*LAYOUT**/
.cont {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.cont section {
display: flex;
width: 100%;
}
.cont .left {
/* flex-basis: 50%; */
float: left;
left: 0;
padding: 4rem;
background-color: #ffffff;
/* 20211129_수정 */
box-sizing: border-box;
}
.cont .right {
float: right;
right: 0;
/* flex-basis: 50%; */
padding: 4rem;
box-shadow: -1.52vh 0 3.8vh -.95vh rgba(0, 0, 0, .4);
box-sizing: border-box;
}
@media screen and (max-width: 1300px) {
.cont {
display: inline-flex;
flex-direction: row;
/* flex-wrap: wrap; */
}
.cont section {
width: 100%;
height: auto;
}
.cont .left,
.cont .right {
transform: scale(0.6);
resize: both;
width: 100%;
justify-content: center;
}
}
<!-- More media queries commented out -->
<div id="wrap" class="index" style="display:flex">
<div class="cont">
<section class="topbox">
<br>
<br>
</section>
<section class="left">
<div class="inner">
<div class="tbl_row">
<p class="day">2019. 6. 10. MON</p>
</div>
<div class="tbl_row">
<h1 class="name">Name of Center</h1>
</div>
<div class="tbl_row">
<div class="shop_logo">
<div class="logo">
<img src="../img/sample_logo.png" alt="">
</div>
</div>
</div>
<div class="powered_area">
<p class="powered">Powered By <img src="../img/logo02.png" alt="Company Name"></p>
</div>
</div>
</section>
<!-- Keypad -->
<section class="right">
<div class="inner">
<div class="pw">
<input type="number" class="input_style" placeholder="Enter 4-digit number">
</div>
<ul class="keypad clearfix">
<li onClick=""><span class="num">1</span></li>
<li onClick=""><span class="num">2</span></li>
<li onClick=""><span class="num">3</span></li>
<li onClick=""><span class="num">4</span></li>
<!-- More keypad numbers -->
</ul>
</div>
</section>
<section class="topbox">
<br>
<br>
</section>
<!-- //Keypad -->
</div>