As my javascript is basically nonexistent, i was wondering if there was a jscript way of doing the below? the idea is to have a popup display when in portrait mode and disappearing in landscape mode.
I have seen posts in relation to " screen.orientation.addEventListener("change", function(e) " but not really sure how this would work.
thanks in advance
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>symvolli-grid-layout</title>
<style>
.modal-content {
position: relative;
background-color: #fefefe;
margin: auto;
padding: 0;
border: 1px solid #888;
border-radius: 5px;
width: 50%;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
-webkit-animation-name: animatetop;
-webkit-animation-duration: 0.4s;
animation-name: animatetop;
animation-duration: 0.4s
}
/* Add Animation */
@-webkit-keyframes animatetop {
from {top:-300px; opacity:0}
to {top:0; opacity:1}
}
@keyframes animatetop {
from {top:-300px; opacity:0}
to {top:0; opacity:1}
}
.modal-header {padding: 2px 16px; background-color: #62c0c0; color: white;}
.modal-body {padding: 2px 16px;}
.modal-footer {padding: 2px 16px; background-color: #62c0c0; color: white;
}
.container {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: auto;
grid-gap: 20px;
}
.item {
background-color: #ddd;
padding: 20px;
text-align: center;
}
/* Portrait orientation */
@media screen and (orientation: portrait) {
.modal {display: flex; height: 100vh; background-color: #000000b8;}
.modal-content {
display: flex;
height: 50vh;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
}
}
/* Landscape orientation */
@media screen and (orientation: landscape) {
.modal {display: none;}
.modal-content {display: none;}
}
</style>
</head>
<body>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<div class="popup-logo-div">
<span class="close">×</span>
<h3>THIS PAGE IS BEST VIEWED IN LANSCAPE MODE</h3>
</div>
</div>
</div>
<section class="main-header-container">
<div class="main-header">
<h2>ADD HEADER IN HERE</h2>
</div>
</section>
<section class="container">
<div class="item">add header in here</div>
</section>
</body>
</html>