Используя материализацию, желая устранить пустое пространство на мобильном только - PullRequest
Новая
       13

Используя материализацию, желая устранить пустое пространство на мобильном только

0 голосов
/ 11 июля 2019

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

Я также прикрепил изображение, поскольку вы можете видеть, что отступы и поля достаточно широкие.

https://codepen.io/jehc10/pen/LKqRRQ

.brand-logo {
  margin-left: 20px;
}

.card {
  margin-top: 15px;
}

body {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
  font-family: 'ABeeZee', sans-serif;
  background: #fad1df;
}

main {
  flex: 1 0 auto;
}

.custom {
  margin-right: 100px;
  margin-left: 100px;
}

.pagination {
  margin-top: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
}

table {
  width: 600px;
  margin: auto;
  border: 2px solid #f1749e;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>My materialize website</title>

  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
  <link rel="stylesheet" href="materialize.css">
  <link href="https://fonts.googleapis.com/css?family=ABeeZee&display=swap" rel="stylesheet">
</head>

<body>

  <!-- Navbar -->
  <main>
    <nav>
      <div class="nav-wrapper pink lighten-3">
        <a href="#" class="brand-logo">Website</a>
        <ul id="nav-mobile" class="right hide-on-med-and-down">
          <li><a href="sass.html">Sass</a></li>
          <li><a href="badges.html">Components</a></li>
          <li><a href="collapsible.html">JavaScript</a></li>
        </ul>
      </div>
    </nav>

    <!-- Cards -->

    <div class="row">
      <div class="col s12 m6">
        <div class="card blue-grey darken-1">
          <div class="card-content white-text">
            <span class="card-title">Example 1</span>
            <p>I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively.</p>
          </div>
          <div class="card-action">
            <a href="#">Request a quote</a>
          </div>
        </div>
      </div>
      <div class="col s12 m6">
        <div class="card blue-grey darken-1">
          <div class="card-content white-text">
            <span class="card-title">Example 2</span>
            <p>I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively.</p>
          </div>
          <div class="card-action">
            <a href="#">Request a quote</a>

          </div>
        </div>
      </div>

    </div>

    <!-- Middle card -->
    <div class="mobile-margin visible-xs">
      <div class="lg12">
        <div class="card custom light-blue lighten-5">
          <div class="card-content black-text">
            <span class="card-title">Example 1</span>
            <p>
              Mauris accumsan pretium lorem et pretium. In lectus metus, tincidunt a ante nec, porta pretium diam. Integer dolor justo, porta nec scelerisque eget, consequat vel mauris. Curabitur quis ipsum magna. Nullam eu dolor id risus convallis pulvinar sed id
              risus. Aliquam condimentum ullamcorper suscipit. Cras vel ligula sit amet tellus hendrerit tincidunt. Proin nec augue id diam fermentum semper dapibus eleifend diam. Quisque vel urna in ante euismod maximus at sed est. Quisque ut tincidunt
              sapien. Suspendisse ut tempus augue. Cras feugiat elementum lorem, vel pellentesque magna. Mauris accumsan pretium lorem et pretium. In lectus metus, tincidunt a ante nec, porta pretium diam. Integer dolor justo, porta nec scelerisque eget,
              consequat vel mauris. Curabitur quis ipsum magna. Nullam eu dolor id risus convallis pulvinar sed id risus. Aliquam condimentum ullamcorper suscipit. Cras vel ligula sit amet tellus hendrerit tincidunt. Proin nec augue id diam fermentum
              semper dapibus eleifend diam. Quisque vel urna in ante euismod maximus at sed est. Quisque ut tincidunt sapien. Suspendisse ut tempus augue. Cras feugiat elementum lorem, vel pellentesque magna. Mauris accumsan pretium lorem et pretium.
              In lectus metus, tincidunt a ante nec, porta pretium diam. Integer dolor justo, porta nec scelerisque eget, consequat vel mauris. Curabitur quis ipsum magna. Nullam eu dolor id risus convallis pulvinar sed id risus. Aliquam condimentum ullamcorper
              suscipit. Cras vel ligula sit amet tellus hendrerit tincidunt. Proin nec augue id diam fermentum semper dapibus eleifend diam. Quisque vel urna in ante euismod maximus at sed est. Quisque ut tincidunt sapien. Suspendisse ut tempus augue.
              Cras feugiat elementum lorem, vel pellentesque magna. Mauris accumsan pretium lorem et pretium. In lectus metus, tincidunt a ante nec, porta pretium diam. Integer dolor justo, porta nec scelerisque eget, consequat vel mauris. Curabitur quis
              ipsum magna. Nullam eu dolor id risus convallis pulvinar sed id risus. Aliquam condimentum ullamcorper suscipit. Cras vel ligula sit amet tellus hendrerit tincidunt. Proin nec augue id diam fermentum semper dapibus eleifend diam. Quisque
              vel urna in ante euismod maximus at sed est. Quisque ut tincidunt sapien. Suspendisse ut tempus augue. Cras feugiat elementum lorem, vel pellentesque magna.
            </p>
          </div>
        </div>
      </div>

      <!-- Table -->

      <table class="responsive-table">
        <thead>
          <tr>
            <th>Name</th>
            <th>Item Name</th>
            <th>Item Price</th>
          </tr>
        </thead>

        <tbody>
          <tr>
            <td>Alvin</td>
            <td>Eclair</td>
            <td>$0.87</td>
          </tr>
          <tr>
            <td>Alan</td>
            <td>Jellybean</td>
            <td>$3.76</td>
          </tr>
          <tr>
            <td>Jonathan</td>
            <td>Lollipop</td>
            <td>$7.00</td>
          </tr>
        </tbody>
      </table>

      <!-- Hover button -->

      <div class="fixed-action-btn">
        <a class="btn-floating btn-large red">
          <i class="large material-icons">mode_edit</i>
        </a>
        <ul>
          <li><a class="btn-floating red"><i class="material-icons">insert_chart</i></a></li>
          <li><a class="btn-floating yellow darken-1"><i class="material-icons">format_quote</i></a></li>
          <li><a class="btn-floating green"><i class="material-icons">publish</i></a></li>
          <li><a class="btn-floating blue"><i class="material-icons">attach_file</i></a></li>
        </ul>
      </div>

      <!-- Pagination -->

      <ul class="pagination">
        <li class="disabled"><a href="#!"><i class="material-icons">chevron_left</i></a></li>
        <li class="active"><a href="#!">1</a></li>
        <li class="waves-effect"><a href="#!">2</a></li>
        <li class="waves-effect"><a href="#!">3</a></li>
        <li class="waves-effect"><a href="#!">4</a></li>
        <li class="waves-effect"><a href="#!">5</a></li>
        <li class="waves-effect"><a href="#!"><i class="material-icons">chevron_right</i></a></li>
      </ul>



  </main>

  <!-- Footer -->

  <footer class="page-footer pink lighten-3">
    <div class="container">
      <div class="row">
        <div class="col l6 s12">
          <h5 class="white-text">Footer Content</h5>
          <p class="grey-text text-lighten-4">You can use rows and columns here to organize your footer content.</p>
        </div>
        <div class="col l4 offset-l2 s12">
          <h5 class="white-text">Links</h5>
          <ul>
            <li><a class="grey-text text-lighten-3" href="#!">Link 1</a></li>
            <li><a class="grey-text text-lighten-3" href="#!">Link 2</a></li>
            <li><a class="grey-text text-lighten-3" href="#!">Link 3</a></li>
            <li><a class="grey-text text-lighten-3" href="#!">Link 4</a></li>
          </ul>
        </div>
      </div>
    </div>
    <div class="footer-copyright">
      <div class="container">
        © 2019 Jesse
        <a class="grey-text text-lighten-4 right" href="#!">More Links</a>
      </div>
    </div>
  </footer>


  <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
  <script src="js/materialize.js"></script>
  <script src="js/init.js"></script>

</body>

</html>
...