Заголовок не отображается в альбомной ориентации

Question

Я создал регистрацию, которая использует идентификатор электронной почты пользователя. Он отлично работает в портретном режиме на мобильных телефонах, но заголовок не отображается в ландшафтном режиме. Я пытался использовать медиа-запросы и overflow: scroll, но ничего не работает. Есть идеи, как это сделать?

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "papyrus";
}

.container{ 
  width: 60%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 2%;
  background: #e9def8;
  }

  .heading{
    margin-top: 2%;
    width: 100%;
    text-shadow: 2px 2px #bfbfbf;
    text-align: center;
  }

  header
  {
    text-align: center;
    font-size: 200%;
  }

  .container h1 {
    margin-bottom: 25px;
    color: rgb(46, 45, 45);
    text-align: center;
    text-transform: capitalize;
    font-size: large;
    padding: 1%;
  }
  input[type=email]{
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    box-sizing: border-box;
    border: none;
    border-bottom: 2px #2f1354;
  }
  input[type=email]:focus {
    outline-color:#6f18ad;
  
  }
  form{
    margin-right: 50px;
    margin-left: 50px;
  }
  
  .button{
    font-size: 50px;
    margin-bottom: 50px;
  
  }
  input[type=submit]{
    color: white;
    font-size: 20px;
    padding: 10px 20px;
    background-color: white;
    border: 2px #2f1354;
    background-image: linear-gradient(to right, #667eea, #8c0ca6);
    font-family: "papyrus";
  }
  
  input[type=submit]:hover {
    box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
    cursor: pointer;
  }
  


  @media screen and (orientation: landscape) {
    body{
      overflow: scroll;
    }
  }

<?php

require 'database/validation.php';

?>


<!DOCTYPE html>
<html>
    <head>
        <meta name = "viewport" content = "width = device-width, initial-scale = 1.0">
        <title>SIGNUP</title>       <!-- This is the title of the page -->
        <link rel="stylesheet" href="style.css">        <!-- Link to the stylesheet -->
    </head>
    
    <body>
        <div class = "box">
            <div class = "heading"></div>
            <header>
                <strong>SIGNUP</strong>       
            </header>

            </div>
        
            <div class = "container">
                <form action="index.php" method="post">        <!-- Form -->
                <h1>Please subscribe here</h1>
                    <label><strong>Email</strong></label>   
                
                    <input type="email" name = "email" value ="<?php echo $email ?>">      <!-- Creates an input field to enter the email address -->
                    <div class="error"><?php echo $error; ?></div>      <!-- Displays error, if any -->
                    <div class = "button">
                        <input type = "submit" name = "submit" value = "Subscribe">     <!-- A subscribe button to submit the email id entered in the email field -->
                    </div>
                </form>     <!-- End of form -->

            </div>
        </div>
        
    </body>     <!-- End of the body -->

</html>

Заголовок не отображается в альбомной ориентации

Ответы (0)