CSS Отзывчивые проблемы дизайна - PullRequest
Новая
       10

CSS Отзывчивые проблемы дизайна

0 голосов
/ 09 ноября 2018

У меня проблемы с этой веб-страницей, которую я создаю. Код вставлен ниже, но вы также можете посмотреть его здесь:

Вот основные проблемы, которые мешают мне завершить его. Наиболее важным является 1-й выпуск. Это действительно сводит меня с ума !!!

  1. Ниже 490 пикселей и более 320 пикселей размера окна есть 3 элемента, ширина которых уменьшается больше, чем у других элементов, которые имеют полную ширину. Вы можете видеть, что элементы header-left и header-right (которые уложены в мобильный размер) и элемент нижнего колонтитула сжимаются больше, чем остальная часть страницы, что приводит к смещению правой стороны страницы. Что-то препятствует равномерному разрушению элементов.

  2. Кроме того, я разместил нижний колонтитул абсолютно внизу страницы, но также переместил его на 100 пикселей вверх, чтобы он скользил вверх под текстом выше. Но это оставляет пробел внизу страницы. Есть ли способ закрыть этот пробел?

Большое спасибо за любую помощь, которую вы можете оказать мне. Пит 

* {
  box-sizing: border-box;
}

html {
  font-size: 16px;
}

html,
body,
p {
  margin: 0;
  padding: 0;
}

body {
  font-family: "Arial Narrow", Helvetica, sans-serif;
  color: black;
  font-size: 16px;
  font-size: 1rem;
}

p {
  line-height: 1;
  margin: 0;
  padding: 0;
}

.container {
  padding: 0;
  max-width: 1239px;
  margin: 0 auto;
  margin-bottom: -137px;
}

header {
  display: table;
  vertical-align: top;
  height: 200px;
  z-index: 1004;
}

.header-left {
  display: table-cell;
  vertical-align: top;
  width: 78%;
  color: #fff;
  background-color: #00948f;
  box-shadow: 7px 15px 18px #aaa;
  -webkit-box-shadow: 7px 15px 18px #aaa;
  position: relative;
}

.header-left h1 {
  font-size: 50px;
  font-size: 3.125rem;
  margin: 0;
  letter-spacing: 2px;
  background-color: #00948f;
  width: 100%;
  padding: 20px 85px 30px 138px;
  line-height: 1.1;
  margin: 0;
}

.header-left h1 span {
  font-size: 30px;
  font-size: 1.875rem;
  line-height: 1;
  display: inline-block;
  margin-bottom: 20px;
}

.header-spacer {
  display: table-cell;
  width: 2%;
}

.header-right {
  display: table-cell;
  width: 21%;
  background-color: #9fd2d0;
  box-shadow: 7px 15px 18px #aaa;
  -webkit-box-shadow: 7px 15px 18px #aaa;
  z-index: 1002;
  padding: 175px 61px 0 20px;
  line-height: 1.3;
  font-size: 28px;
  font-size: 1.75rem;
}

.small-box {
  width: 8%;
  height: 33px;
  background-color: #9fd2d0;
  z-index: 1005;
  padding: 0;
}

.center-table {
  display: table;
  width: 100%;
  margin-top: 10px;
}

.center-row {
  display: table-row;
}

.vert-spacer {
  display: table-cell;
  background-color: #e6e7e8;
  z-index: -2;
  width: 8%;
}

main {
  display: table-cell;
  width: 69%;
}

.main-body {
  margin-left: 20px;
  height: 100%;
}

.main-body p:first-child {
  font-size: 44px;
  font-size: 2.75rem;
}

.main-body p:nth-child(2) {
  font-size: 27px;
  font-size: 1.6875rem;
}

.main-body .hr {
  border-top: 10px solid white;
  margin: 20px 0;
}

.main-body p:nth-child(3) {
  font-size: 27px;
  font-size: 1.6875px;
}

.main-body-header {
  background-color: #9fd2d0;
  padding: 10px 25px 15px;
  margin-bottom: 20px;
}

.main-body-header p:first-child {
  font-size: 44px;
  font-size: 2.75rem;
  margin-bottom: 10px;
}

.main-body-header p:nth-child(2) {
  font-size: 27px;
  font-size: 1.6875rem;
}

.main-body-header hr {
  border-width: 10px;
}

.main-body-header p:nth-child(4) {
  font-size: 30px;
  font-size: 1.875rem;
  text-align: center;
  margin-bottom: 5px;
}

.main-body-header p:nth-child(5) {
  font-size: 24px;
  font-size: 1.5rem;
  text-align: center;
  margin-bottom: 10px;
}

.main-body-header p:nth-child(6) {
  font-size: 24px;
  font-size: 1.5rem;
}

.foot-note {
  font-size: 20px !important;
  font-size: 1.25rem !important;
  margin-bottom: 1.25rem;
}

.co-chairs {
  font-size: 22px !important;
  font-size: 1.375rem !important;
  margin-bottom: 20px;
}

.co-chairs span {
  color: #00837c;
}

table {
  font-size: 23px;
  font-size: 1.4375rem;
  border-collapse: collapse;
}

table th {
  text-align: left;
  padding-left: 20px;
}

table tr td {
  padding: 5px;
}

table tr td:first-child {
  width: 20%;
}

table tr td:nth-child(2) {
  width: 55%;
}

table tr td:nth-child(3) {
  width: 25%;
  text-align: right;
  padding-right: 20px;
}

table tr.header {
  text-transform: uppercase;
  font-size: 28px;
  font-size: 1.75rem;
  background-color: #00948f;
  color: white;
}

table tr.header th {
  border-top: 5px solid black;
}

table tr:not(agenda) td {
  border-bottom: 3px solid #00948f;
}

table tr.qa {
  background-color: #e5f4f4;
}

table tr.break {
  background-color: #cdeae9;
}

aside {
  padding: 0 20px;
  display: table-cell;
  width: 21%;
  text-align: top;
}

aside .list-header {
  text-transform: uppercase;
  color: #004a99;
  font-size: 28px !important;
  font-size: 1.75rem !important;
  margin-bottom: 10px;
}

aside .faculty-list {
  list-style: none;
  padding: 0;
  font-size: 18px;
  font-size: 1.125rem;
  color: #a0a0a0;
}

aside .faculty-list li {
  margin-bottom: 15px;
}

aside .faculty-list li span {
  display: inline-block;
  color: black;
  font-size: 23px;
  font-size: 1.277777778rem;
}

footer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 137px;
  z-index: 10000;
  position: relative;
  min-width: 420px;
  background-color: #00948f;
  width: 100%;
  height: 402px;
  z-index: -2;
}

footer p {
  position: absolute;
  left: 20px;
  bottom: 30px;
  font-size: 19px;
  font-size: 1.1857rem;
  line-height: 1.3;
}

footer .logo {
  position: absolute;
  right: 60px;
  bottom: 30px;
  width: 90px;
  height: 90px;
  background-color: #9fd2d0;
  display: inline-block;
}

@media screen and (max-width: 767px) {
  .header-left,
  .header-right {
    display: block;
    width: auto;
  }
  .header-left {
    margin: 0 20px;
  }
  .header-left h1 {
    font-size: 40px !important;
    font-size: 2.5rem !important;
    padding: 20px !important;
  }
  .header-left h1 span {
    font-size: 15px !important;
    font-size: 0.9375rem !important;
  }
  .header-right {
    padding: 20px !important;
    margin: 30px 20px 0;
  }
  .small-box {
    display: none;
  }
  .vert-spacer {
    display: none;
  }
  main,
  aside {
    display: block;
    width: auto;
  }
  .main-body {
    margin: 20px;
  }
  .main-body-header p:first-child {
    text-align: center;
    font-size: 40px;
    font-size: 2.5rem;
  }
}

@media screen and (max-width: 1120px) {
  footer p {
    bottom: 100px;
  }
  footer .logo {
    right: auto;
    left: 20px;
    bottom: 5px;
  }
}
<!DOCTYPE html>
<html lang="en-us">

<head>
  <title>Lorem ipsum dolor sit amet</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- strongly recommended by the Bootstrap -->
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <link rel="stylesheet" type="text/css" href="app.css">
</head>

<body>
  <div class="container">
    <header class="header">
      <div class="tbl-row">
        <div class="header-left">
          <h1>
            <span>Lorem ipsum dolor sit amet, consectetur adipiscing</span><br/> Excepteur sint occaecat cupidatat<br/> Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
          </h1>
        </div>
        <div class="header-spacer"></div>
        <div class="header-right">
          <p>Ut enim ad minim veniam, quis nostrud</p>
        </div>
      </div>
    </header>
    <div class="small-box"></div>

    <!-- CENTER TABLE -->
    <div class="center-table">
      <!-- CENTER ROW -->
      <div class="center-row">

        <div class="vert-spacer"></div>

        <!-- MAIN -->
        <main>
          <div class="main-body">
            <div class="main-body-header">
              <p><strong>WEBCAST</strong>TRANSMITTED LIVE ON</p>
              <p>Sunday, 9 December 2018, 3:00 (EST) from New York, NY</p>
              <div class="hr"></div>
              <p><strong>Webcast:</strong><em>To View From Your Home or Office, Register at:</em></p>
              <p>www.irure dolor in reprehenderit.com</p>
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.</p>

            </div>
            <p class="foot-note">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.</p>
            <p class="co-chairs"><span>Co-Chairs:</span> John Jones (Brazil), George Orwell (London, England)</p>
            <table class="table">
              <thead>
                <tr class="header">
                  <th colspan="3">agenda</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>09:00 – 09:05</td>
                  <td>Welcome and Introduction</td>
                  <td>Co-Chairs</td>
                </tr>
                <tr>
                  <td>09:05 – 09:30</td>
                  <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</td>
                  <td>John Jones</td>
                </tr>
                <tr class="qa">
                  <td>09:30 – 09:35</td>
                  <td colspan="2">Q&A</td>
                </tr>
                <tr>
                  <td>09:35 – 10:00</td>
                  <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</td>
                  <td>George Orwell</td>
                </tr>
                <tr class="qa">
                  <td>10:00 – 10:05</td>
                  <td colspan="2">Q&A</td>
                </tr>
                <tr>
                  <td>10:05 – 10:30</td>
                  <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</td>
                  <td>Who Cares</td>
                </tr>
                <tr class="qa">
                  <td>10:30 – 10:35</td>
                  <td colspan="2">Q&A</td>
                </tr>
                <tr class="break">
                  <td>10:35 – 11:05</td>
                  <td colspan="2">Break</td>
                </tr>
                <tr>
                  <td>11:05 – 11:30</td>
                  <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</td>
                  <td>Sam Man</td>
                </tr>
                <tr class="qa">
                  <td>11:30 – 11:35</td>
                  <td colspan="2">Q&A</td>
                </tr>
                <tr>
                  <td>11:35 – 12:35</td>
                  <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</td>
                  <td>Faculty</td>
                </tr>
                <tr>
                  <td>12:35 – 12:45</td>
                  <td>Closing Remarks</td>
                  <td>Co-Chairs</td>
                </tr>
              </tbody>
            </table>
            <!-- /table -->
          </div>
          <!-- /main-body -->
        </main>
        <!-- /MAIN -->

        <!-- ASIDE -->
        <aside>
          <div class="main-body">
            <p class="list-header">Co-Chairs</p>
            <ul class="faculty-list">
              <li>
                <span>John Jacob</span>
                <br/> Expert in Stuff
                <br/> Lorum ipsum Division
                <br/> Department of Lorem Ipsum
                <br/> 200 Car Talk Tower, Dewey Cheatum & Howe
                <br/> Cambridge, MA
              </li>

              <li>
                <span>John Jacob</span>
                <br/> Expert in Stuff
                <br/> Lorum ipsum Division
                <br/> Department of Lorem Ipsum
                <br/> 200 Car Talk Tower, Dewey Cheatum & Howe
                <br/> Cambridge, MA
              </li>
            </ul>
            <p class="list-header">faculty</p>
            <ul class="faculty-list">
              <li>
                <span>John Jacob</span>
                <br/> Expert in Stuff
                <br/> Lorum ipsum Division
                <br/> Department of Lorem Ipsum
                <br/> 200 Car Talk Tower, Dewey Cheatum & Howe
                <br/> Cambridge, MA
              </li>
              <li>
                <span>John Jacob</span>
                <br/> Expert in Stuff
                <br/> Lorum ipsum Division
                <br/> Department of Lorem Ipsum
                <br/> 200 Car Talk Tower, Dewey Cheatum & Howe
                <br/> Cambridge, MA
              </li>
              <li>
                <span>John Jacob</span>
                <br/> Expert in Stuff
                <br/> Lorum ipsum Division
                <br/> Department of Lorem Ipsum
                <br/> 200 Car Talk Tower, Dewey Cheatum & Howe
                <br/> Cambridge, MA
              </li>

              <li>
                <span>John Jacob</span>
                <br/> Expert in Stuff
                <br/> Lorum ipsum Division
                <br/> Department of Lorem Ipsum
                <br/> 200 Car Talk Tower, Dewey Cheatum & Howe
                <br/> Cambridge, MA
              </li>
            </ul>
          </div>
          <!-- /main-body -->
        </aside>
        <!-- /ASIDE -->

      </div>
      <!-- /CENTER ROW -->

    </div>
    <!-- /CENTER TABLE -->

    <!-- FOOTER -->
    <footer>
      <p>
        Copyright © 2018 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
        <br/> XXX-999999-YY
      </p>
      <div class="logo">LOGO GOES HERE</div>
    </footer>
    <!-- /FOOTER-->
  </div>
  <!-- /container -->

</body>

</html>

1 Ответ

0 голосов
/ 09 ноября 2018

Это должно исправить проблему # 1: 

.container {
    width: fit-content;
}
...