Question

我在尝试对着陆页进行编码时遇到了一个问题。基本上我有这两个部分，专业知识和联系方式。问题是该部分接触在小屏幕上与它上面的部分重叠。在“专业知识”部分中，我有一个放置显示的容器：网格，以便正确对齐所有元素。不过，在大屏幕上一切正常。您是否知道如何解决此问题？

DEMO

HTML：

   !<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <link href="./css/style.css" type="text/css" rel="stylesheet">
  </head>
  <body>
    <!--expertise-->
    <section id="expertises">
      .<div class="container">
        <div class="expertises-head">
          <h2>Di cosa mi occupo</h2>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
        <div class="expertise1">
          <img src="./img/together.png">
          <h3>Competenza 1</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
        <div class="expertise2">
          <img src="./img/together.png">
          <h3>Competenza 2</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
        <div class="expertise3">
          <img src="./img/together.png">
          <h3>Competenza 3</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
        <div class="expertise4">
          <img src="./img/together.png">
          <h3>Competenza 4</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
        <div class="expertise5">
          <img src="./img/together.png">
          <h3>Competenza 5</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
        <div class="expertise6">
          <img src="./img/together.png">
          <h3>Competenza 6</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
      </div>
    </section>
    <!--END expertise-->

    <!--contacts-->
    <section id="contacts">
      <div class="container">
        <div class="contacts-head">
          <h2>Contatti</h2>
        </div>
        <div class="contacts-form">
          <form action="contattami.php" method="post">
            <div class="form-group">
              <label for="InputName">Nome e cognome</label>
              <input type="text" name="nome" required="" placeholder="Nome e cognome" class="InputName">
            </div>
            <div class="form-group">
              <label for="InputEmail">Indirizzo e-mail</label>
              <input type="email" name="email" required="" placeholder="Indirizzo e-mail" class="InputEmail">
            </div>
            <div class="form-group">
              <label for="InputSubject">Oggetto</label>
              <input type="text" name="oggetto" required="" placeholder="Oggetto" class="InputSubject">
            </div>
            <div class="form-group">
              <label for="InputMsg">Messaggio </label>
              <textarea name="messaggio" rows="4" required="" placeholder="Messaggio" class="InputMsg"></textarea>
            </div>
            <div class="form-group">
              <input type="submit" name="submit" placeholder="Invia" class="Submit">
            </div>
          </form>
        </div>
        <div class="contact-others">
          <ul>
            <li>
              <div class="contact-email">
                <h3 class="text-uppercase">Indirizzo email <img src=".\img\mail.png"></h3>
                <p>probootstrap@gmail.com</p>
              </div>
            </li>
            <li>
              <div class="contact-cellphone">
                <h3 class="text-uppercase">Cellullare <img src=".\img\smartphone-call.png"></h3>
                <p>+30 976 1382 9921</p>
              </div>
            </li>
            <li>
              <div class="contact-skype">
                <h3 class="text-uppercase">Skype <img src=".\img\skype-logo.png"></h3>
                <p>Maria.rosaria.ciullo</p>
              </div>
            </li>
            <li>
              <div class="contact-address">
                <h3 class="text-uppercase">Indirizzo <img src=".\img\location.png"></h3>
                <p>San Francisco, CA</p>
                <p>4th Floor8 Lower</p>
                <p>San Francisco street, M1 50F</p>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </section>
    <!--END contacts-->

  </body>
</html>

CSS：

*, *::before, *::after {
  box-sizing: border-box;
}

body{
  font-family: 'Raleway', 'PT Sans', sans-serif;
  line-height: 1.5;
  margin: 0;
  padding: 0;
  background: #FFF;
}

img{
  width: 100%
}

.container{
  max-width: 1271px;
  text-align: center;
  margin: 0 auto;
  padding: 0 3rem;
}



/* expertises */
#expertises{
  width: 100%;
  min-height: 100vh;
  padding: 5em 0;
}

#expertises .container{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: minmax(100px, auto);
  grid-gap: 1em;
}

#expertises .expertises-head{
  grid-column: 1/4;
  grid-row: 1;
  margin-bottom: 2vh;
}

#expertises img{
  width: auto;
}

/* contacts */
#contacts{
  width: 100%;
  min-height: 100vh;
  padding: 5em 0;
  display: inline-block;
}

#contacts .container{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: minmax(100px, auto);
}

#contacts .contacts-head{
  grid-column: 1/3;
  grid-row: 1;
  text-align: left;
}

#contacts .contacts-form{
  grid-column: 1/3;
  grid-row: 2;
  text-align: left;
  box-shadow: 0 0 20px 0 rgba(72,94,116,0.7)
}

#contacts .contact-others{
  grid-column: 3/3;
  grid-row: 2;
  text-align: left;
}

#contacts .contact-email, .contact-cellphone, .contact-address, .contacts-skype{
  margin-bottom: 30px;
}

#contacts .text-uppercase{
    font-size: 20px;
    font-weight: bold;
}

#contacts ul{
  list-style-type: none;
}

#contacts p{
  line-height: 8px;
}

#contacts img{
  width: auto;
}

这基本上是问题。

Answer 1

如果您添加宽度小于600像素的媒体查询，并使用以下内容更改#contacts .contact-others类，则该类应该起作用。

#contacts .contact-others{
   grid-column: 1/3;
   grid-row: 4;
   text-align: left;
}

联系人部分与使用显示的部分重叠：其上方的网格

1 个答案: