HTML tag stuck to top left of mobile page with white space around it-CodePudding

I am making a website (in flask python) and for desktop view, everything works fine, however, when i goto test in any mobile view it gives me this massive white space around the page. I inspect element to see the issue and it seems the entire tag is stuck to the top left corner and not filling the entire page.

I've tried doing html, body { min-height: 100%; } however this doesnt change anything and I get the same result.

styles.css

@import url('https://fonts.googleapis.com/css2?family=Sora&display=swap');
* {
  font-family: 'Sora', sans-serif;
}

/* Header */
.hero {
  display: block;
  box-sizing: border-box;
  height: 400px;
  background-color: #a859f9;
  clip-path: ellipse(75% 100% at 65% 0%);
  margin-bottom: 30px;
}

.hero .content .title {
  text-align: center;
  padding: 8%;
  font-size: 250%;
  color: #fff;
}

/* Message Box e.g for search on index.html */
.message {
    text-align: center;
    padding: 5px;
    border: #ccc dotted 2px;
    margin-top: 2rem;
}

/* -------------------------------------------------- */
/* https://www.youtube.com/watch?v=O-QUBZuZlXM&list=LL&index=1 */
#reviews{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
}

.review-box-container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  width: 100%;
}

.review-box{
  width: 500px;
  box-shadow: 2px 2px 30px rgba(0,0,0,0.1);
  background-color: #ffffff;
  padding: 20px;
  border-radius: 25px;
  overflow: hidden;
  margin: 15px;
  cursor: pointer;
}

.profile-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.profile {
  display: flex;
  align-items: center;
}

.name-user {
 display: flex;
 flex-direction: column;
}

.name-user strong {
  color: #3d3d3d;
  font-size: 1.1rem;
  letter-spacing: 0.5px;
}

.name-user spam {
  color: #979797;
  font-size: 0.9rem;
}

.review-content {
  color: yellow;
}

.box-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.review-comment {
  font-size: 0.9rem;
  color: #4b4b4b;
}

.review-box:hover {
  transform: translateY(-10px);
  transition: all ease 0.3s;
  box-shadow: 2px 2px 30px rgba(0,0,0,0.3);
}

@media(max-width:1060px){
  .review-box{
    width: 45%;
    padding: 10px;
  }
}
@media(max-width:790px){
  .review-box{
    width: 100%;
  }
  .review-heading h1 {
    font-size: 1.4rem;
  }
}

/* ----------------------------------------------------- */




/* Review content */
#wrapper {
  padding-top: 4%;
}

/* Footer */
.footer-basic {
    padding: 6%;
    bottom: 0;
    width: 100%;
    padding-top: 5%;
    background-color: #ffffff;
    color: #4b4c4d;
    clear: both;
}

.footer-basic ul {
  padding: 0;
  list-style: none;
  text-align: center;
  font-size: 18px;
  line-height: 1.6;
  margin-bottom: 0;
}

.footer-basic li {
  padding: 0 10px;
}

.footer-basic ul a {
  color: inherit;
  text-decoration: none;
  opacity: 0.8;
}

.footer-basic ul a:hover {
  opacity: 1;
}

.footer-basic .social {
  text-align: center;
  padding-bottom: 10px;
}

.footer-basic .social>a {
  font-size: 24px;
  width: 40px;
  height: 40px;
  line-height: 40px;
  display: inline-block;
  text-align: center;
  border-radius: 50%;
  border: 1px solid #ccc;
  margin: 0 8px;
  color: inherit;
  opacity: 0.75;
}

.footer-basic .social>a:hover {
  opacity: 0.9;
}

.footer-basic .copyright {
  margin-top: 15px;
  text-align: center;
  font-size: 13px;
  color: #aaa;
  margin-bottom: 0;
}

.fade_rule {
  height: 1px;
  background-color: #E6E6E6;
  width: 66.0em;
  margin: 0 auto;
  background-image: linear-gradient(left , white 2%, #E6E6E6 50%, white 98%);
  background-image: -o-linear-gradient(left , white 2%, #E6E6E6 50%, white 98%);
  background-image: -moz-linear-gradient(left , white 2%, #E6E6E6 50%, white 98%);
  background-image: -webkit-linear-gradient(left , white 2%, #E6E6E6 50%, white 98%);
  background-image: -ms-linear-gradient(left , white 2%, #E6E6E6 50%, white 98%);
  background-image: -webkit-gradient( linear, left bottom, right bottom, color-stop(0.02, white), color-stop(0.5, gray), color-stop(0.98, white) );
}

.privacy {
  padding: 30px;
}

index.html

{% extends "layout.html" %}
{% block content %}
    <title>Home</title>

    <!--TO DO::-->
    <!-- Add a nice box input section that asks user for a search term to search reviews-->
    <!-- By there description, form should have a post request to /search route-->

    <!-- Simple display message to tell user to enter something valid if nothing is entered (make nicer after making the TODO above)-->
    {% if message %}
        <p >{{ message | safe }}</p>
    {% endif %}

    <section id="reviews">
        <div >
            <!-- Get all the data from mongodb database-->
            {% for review in reviews %}
            <div >
                <div >

                    <div >
                        <div >
                            <img src="{{ url_for('static', filename='images/Lincoln-Logo.png') }}" width="50" height="50" alt="profile">
                        </div> 
                        <div >
                            <strong>{{ review.User }}</strong>
                            <span>Datetime</span>
                        </div>
                    </div>

                    <div >
                        <i ></i>
                        <i ></i>
                        <i ></i>
                        <i ></i>
                        <i ></i> <!-- Holo star -->

                    </div>
                </div>

                <div >
                    <p>{{ review.Review_Summary}}</p>
                </div>
            </div>
            {% endfor %}
        </div>
    </section>


{% endblock content %}

layout.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css">

    <link rel="stylesheet" href="{{ url_for('static', filename='flatly.min.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}">

    <script src="https://kit.fontawesome.com/2b30f58ae7.js" crossorigin="anonymous"></script>
</head>
<body>
    <!-- Main title -->
    <div >
        <div >
            <div >University of Lincoln <br>
                               Review page
            </div>
        </div>
    </div>

    <!-- Other html docs that inherit this doc will insert there data in here -->
    {% block content %}{% endblock %}
    
    <!-- TO DO: -->
    <!-- 1. Change social media icons, and bottom page links to something else -->
    <div >
        <footer>
            <div ></div>
            <br><br>
            <ul >
                <li ><a href="{{url_for('main.index')}}">Home</a></li>
                <li ><a href="{{url_for('main.privacy_policy')}}">Privacy Policy</a></li>
            </ul>
            <p >Lincoln Reviews | 2022</p>
        </footer>
    </div>

</body>
</html>

CodePudding user response：

In the fade_rule class you have width: 66.0em;. Remove it and the mobile view should be fine.

.fade_rule {
    height: 1px;
    background-color: #E6E6E6;
    margin: 0 auto;
    background-image: linear-gradient(left , white 2%, #E6E6E6 50%, white 98%);
    background-image: -o-linear-gradient(left , white 2%, #E6E6E6 50%, white 98%);
    background-image: -moz-linear-gradient(left , white 2%, #E6E6E6 50%, white 98%);
    background-image: -webkit-linear-gradient(left , white 2%, #E6E6E6 50%, white 98%);
    background-image: -ms-linear-gradient(left , white 2%, #E6E6E6 50%, white 98%);
    background-image: -webkit-gradient( linear, left bottom, right bottom, color-stop(0.02, white), color-stop(0.5, gray), color-stop(0.98, white) );
}