why my code is not covering the whole screen in mobile view its is only covering half of the screen
Question
please help me out with this code. It looks great in the pc but covering only half of the screen in the mobile view. Do guide me out with this issue. Below is my code of HTML and CSS. I will be very grateful for your help. I think there is some problem with the container-fluid class which is, as it is not covering the whole screen
body{ /* background: no-repeat fixed url(../images/background.png); */ font-family: 'open Sans'; color: white; } /* Navbar section */ .container-fluid{ background: no-repeat fixed url(../images/background3.png); background-size: cover; padding: 8% 15%; height: 710px; } .navbar-light{ background-color: #78c9cb; color: grey; font-size: 200%; } /* Create Account Section */ .card{ max-width: 800px; padding: 0; text-align: center; /* margin-top: 10%; */ } .create{ font-size: 3rem; padding:0; font-weight: bolder; } .form-group{ padding: 0.8rem; } @media (max-width:800px) { .container-fluid{ padding: 20% 15%; } body{ max-height: 100%; } }
<!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <!-- CSS stylesheet --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384- JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous"> <link rel="stylesheet" href="css/styles.css"> <!-- Google Fonts --> <link href="http://fonts.googleapis.com/css?family=Open+Sans:300,600,700"> <link href="https://fonts.googleapis.com/css2?family=Alex+Brush&display=swap" rel="stylesheet"> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.8/css/all.css"> <title></title> </head> <body> <!-- Navigation bar --> <header id="Head"> <div class="container-fluid"> <nav class="navbar fixed-top navbar-expand-lg navbar-light"> <a class="navbar-brand" href="#"><img src="images/icon.png" width="30%" height="30%" alt="Icon"> </a> <button class="navbar-toggler ml-auto" type="button" data-toggle="collapse" data-target="#menu" aria-controls="menu" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="menu"> <ul class="navbar-nav ml-auto"> <li class="nav-item"> <a class="nav-link" href="#home">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#news">News</a> </li> <!-- <li class="nav-item"> <a class="nav-link" href="#profile">Profile</a> </li> --> <li class="nav-item"> <a class="nav-link" href="#about">About</a> </li> <li class="nav-item"> <a class="nav-link" href="#contact">Contact Us</a> </li> </ul> </div> </nav> <!-- Registration --> <div class="row "> <div class="card bg-dark mx-auto"> <div class="card-header"> <h2 class="create">Create Account</h2> </div> <div class="card-body"> <form class="" action="login.php" method="post"> <div class="form-group input-group"> <div class="input-group-prepend"> <span class="input-group-text"> <i class="fa fa-user"></i> </span> </div> <input name="username" class="form-control" placeholder="User name" type="text"> </div> <div class="form-group input-group"> <div class="input-group-prepend"> <span class="input-group-text"> <i class="fa fa-envelope"></i> </span> </div> <input name="email" class="form-control" placeholder="Email address" type="email"> </div> <div class="form-group input-group"> <div class="input-group-prepend"> <span class="input-group-text"> <i class="fa fa-lock"></i> </span> </div> <input name="password" class="form-control" placeholder="Password" type="password"> </div> <input type="submit" class="btn btn-primary btn-block" name="submit" value="Create Account"> <p>Have an account?<a href="login.php">Log In</a> </p> </form> </div> </div> </div> </div> </header> </section> <!-- JavascriptTags --> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384- DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"> </script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script> </body> </html>
1 answers
solution1
0 2020-09-26 15:28:22
Add this style @375px media queries for iPhone
@media only screen and (max-width:375px) {
#Head .container-fluid{
padding: 0;
}
}
Working demo
body{ /* background: no-repeat fixed url(../images/background.png); */ font-family: 'open Sans'; color: white; } /* Navbar section */ .container-fluid{ background: no-repeat fixed url(../images/background3.png); background-size: cover; padding: 8% 15%; height: 710px; } .navbar-light{ background-color: #78c9cb; color: grey; font-size: 200%; } /* Create Account Section */ .card{ max-width: 800px; padding: 0; text-align: center; /* margin-top: 10%; */ } .create{ font-size: 3rem; padding:0; font-weight: bolder; } .form-group{ padding: 0.8rem; } @media (max-width:800px) { .container-fluid{ padding: 20% 15%; } body{ max-height: 100%; } } @media only screen and (max-width:375px) { #Head .container-fluid{ padding: 0; } }
<!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <!-- CSS stylesheet --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384- JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous"> <link rel="stylesheet" href="css/styles.css"> <!-- Google Fonts --> <link href="http://fonts.googleapis.com/css?family=Open+Sans:300,600,700"> <link href="https://fonts.googleapis.com/css2?family=Alex+Brush&display=swap" rel="stylesheet"> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.8/css/all.css"> <title></title> </head> <body> <!-- Navigation bar --> <header id="Head"> <div class="container-fluid"> <nav class="navbar fixed-top navbar-expand-lg navbar-light"> <a class="navbar-brand" href="#"><img src="images/icon.png" width="30%" height="30%" alt="Icon"> </a> <button class="navbar-toggler ml-auto" type="button" data-toggle="collapse" data-target="#menu" aria-controls="menu" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="menu"> <ul class="navbar-nav ml-auto"> <li class="nav-item"> <a class="nav-link" href="#home">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#news">News</a> </li> <!-- <li class="nav-item"> <a class="nav-link" href="#profile">Profile</a> </li> --> <li class="nav-item"> <a class="nav-link" href="#about">About</a> </li> <li class="nav-item"> <a class="nav-link" href="#contact">Contact Us</a> </li> </ul> </div> </nav> <!-- Registration --> <div class="row "> <div class="card bg-dark mx-auto"> <div class="card-header"> <h2 class="create">Create Account</h2> </div> <div class="card-body"> <form class="" action="login.php" method="post"> <div class="form-group input-group"> <div class="input-group-prepend"> <span class="input-group-text"> <i class="fa fa-user"></i> </span> </div> <input name="username" class="form-control" placeholder="User name" type="text"> </div> <div class="form-group input-group"> <div class="input-group-prepend"> <span class="input-group-text"> <i class="fa fa-envelope"></i> </span> </div> <input name="email" class="form-control" placeholder="Email address" type="email"> </div> <div class="form-group input-group"> <div class="input-group-prepend"> <span class="input-group-text"> <i class="fa fa-lock"></i> </span> </div> <input name="password" class="form-control" placeholder="Password" type="password"> </div> <input type="submit" class="btn btn-primary btn-block" name="submit" value="Create Account"> <p>Have an account?<a href="login.php">Log In</a> </p> </form> </div> </div> </div> </div> </header> </section> <!-- JavascriptTags --> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384- DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"> </script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Why is my navigation bar not covering the whole screen?
why my overlay transparent background color is not covering whole screen
Background not covering whole display screen?
CSS image is not covering whole screen
Why is my image not covering the whole browser?
Not covering full screen iPhone
<body> not covering full screen
Google Maps is not covering the whole screen when clicked on button
how to stop background-color covering whole screen
back ground colour covering whole screen html & css
Related Tags