I'm currently developing a simple webpage editor that allows users to create "slides" for later display elsewhere.
For this purpose, I have designed the following layout:
The left section serves as a preview while the right section functions as the editor where users can adjust paragraph properties. Both sections are styled as follows:
float: left;
height: 100%;
width: 50%;
padding: 2%;
My objective is to ensure that the preview maintains a consistent aspect ratio of 16:9 for accurate representation.
Below is my current code structure:
<div class="leftItem">
<div class="leftArrow"></div>
<div class="preview">
<!-- Text content to be edited goes here -->
</div>
<div class="rightArrow"></div>
</div>
.leftItem {
height: 95%;
width: 50%;
float: left;
display: flex;
align-items: center;
justify-content: center;
}
.preview {
display: block;
width: 90%;
height: 40vh;
border-style: solid;
border-width: 1px;
-webkit-box-shadow: 2px 2px 5px 1px rgba(0,0,0,0.2);
-moz-box-shadow: 2px 2px 5px 1px rgba(0,0,0,0.2);
box-shadow: 2px 2px 5px 1px rgba(0,0,0,0.2);
}