After adding styles for img with max-height:100% and max-width:100%, the display looked fine with just images. However, upon further inspection, I noticed that if the middle row (which can contain one or two columns side by side) has multiple images or an image with text around it, the layout breaks at larger resolutions.
The issue arises because this page displays user-created content on large televisions and monitors. At that point, the middle row pushes the footer row out of view and the content in the middle gets stretched downwards.
I'm not sure if I should make changes to the middle row (or the div inside with the columns for images/text) or try something different.
My goal is to ensure that whether it's a single large image, multiple images, text with an image, or any other combination, everything fits inside the top and bottom rows at all times. I don't mind if it causes the columns to shift more to the left or right, respectively.
Here's the fiddle: https://jsfiddle.net/vbuf0gwL/62/
When you resize the result to around 1457x781, you can clearly see the issue, especially on large displays.
Again, the top and bottom rows should always be visible while the middle content scales accordingly.
img {
max-width: 100%;
max-height: 90vh;
}
html,
body {
height: 100%;
overflow: hidden;
}
.modal-lg {
max-width: 80% !important;
}
.my-container {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.my-container>.top [class^="col-"],
.my-container>.bottom [class^="col-"] {
background-color: #929292;
color: white;
text-align: center;
}
.my-container>.middle {
flex-grow: 1;
padding: 30px;
background-size: cover;
}
.my-container>.middle>* {}
#clock {
/*background-color:#333;*/
font-family: sans-serif;
font-size: 40px;
text-shadow: 0px 0px 1px #fff;
color: #fff;
}
#clock span {
color: #fff;
font-size: 40px;
position: relative;
}
#date {
margin-top: -10px;
letter-spacing: 3px;
font-size: 20px;
font-family: arial, sans-serif;
color: #fff;
}
.buttonContainer {
display: flex;
flex-direction: column;
justify-content: center;
}<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.css" crossorigin="anonymous">
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7017191a171f30415e495e46">[email protected]</a>/css/gijgo.min.css" rel="stylesheet" type="text/css" />
<link href="https://rawgit.com/tempusdominus/bootstrap-4/master/build/css/tempusdominus-bootstrap-4.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="src/ytv.css" type="text/css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://npmcdn.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="463223322e2334067768746872">[email protected]</a>/dist/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.0/moment-with-locales.js"></script>
<script src="https://rawgit.com/tempusdominus/bootstrap-4/master/build/js/tempusdominus-bootstrap-4.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2a4d43404d456a1b0413041c">[email protected]</a>/js/gijgo.min.js" type="text/javascript"></script>
<script type='text/javascript' src='//cdn.jsdelivr.net/jquery.marquee/1.4.0/jquery.marquee.min.js'></script>
</head>
<body>
<div class="container-fluid my-container">
<div class="row">
<div class="col-lg-12" style="background-color:black">
<p style="color:white">
test
</p>
</div>
</div>
<div class="row middle" style="flex:1; ">
<div class="col-lg-6 leftFifty" id="leftFifty">
<div class="leftContent" style="background-color: white; border: dotted 1px black; ">
<p>TEST</p>
<img src="https://via.placeholder.com/1024x942" />
<!-- This is the div that is clicked in to select an image -->
</div>
</div>
<div class="col-lg-6 rightFifty" id="rightFifty">
<div class="rightContent" style="background-color: white; border: dotted 1px black; ">
<p>TEST</p>
<img src="https://via.placeholder.com/1024x942" />
<!-- This is the div that is clicked in to select an image -->
</div>
</div>
</div>
<div class="row ">
<div class="col-lg-12" style="background-color:black">
<p style="color:white">
test
</p>
</div>
</div>
</div>
</body>
</html>