Saya seorang pemula yang berlatih dengan kisi-kisi dan desain responsif. Saya membuat 600px breakpoint saya tetapi ketika saya mengubah ukuran layar, kolom di .main div saya hanya tumpang tindih, dan footer dengan ikon media sosial tidak akan berada di tengah. Ini dia di codepen: https://codepen.io/charity-temple/pen/gOPvJbz< /a>

HTML:

<div class="container">
  <header>
    <h1>LOGO</h1>
  </header>
  <main>
    <div class="main_imageholder">
      <img src="https://res.cloudinary.com/du07lnlg2/image/upload/v1594091023/Messaging_fun-amico_1_mg8xyo.png" alt="sitting-girl">
    </div>
    <div class="textholder">
      <h1>Lead with the possibility to surprise and delight</h1>
      <p>Take stakeholder management so that as an end result, we improve overall outcomes. Repurpose cloud computing and finally make users into advocates.</p>
      <button href="#">Register</button>
    </div>
  </main>
  <div class="social">
    <ul>
      <li><a href="#"><i class="fab fa-facebook-f"></i></a></li>
      <li><a href="#"><i class="fab fa-twitter"></i></a></li>
      <li><a href="#"><i class="fab fa-instagram"></i></a></li>
    </ul>
  </div>
</div>

CSS:

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body{
    background-color: #34495e;
}

.container{
  border: solid white;
  width:auto;
  margin: auto;
  color: white;
  display: grid;
}

header{
  border: solid red;
  width:90%;
  margin-top: 40px;
  margin-right: auto;
  margin-left: auto;
  display: grid;
  align-items: center;
}

header > h1{
  font-weight: 900px;
  font-size: 3vw;
}

main {
  border:solid blue;
  width: 90%;
  height: auto;
  margin:auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-column-gap:10px;
 
}

.main_imageholder{
  border:solid yellow;
  padding: 40px;
}

.main_imageholder > img{
  width: 100%;
}

.textholder{
  border: solid pink;
  padding: 30px;
}

h1{
  font-family: "Poppins";
  font-weight: 500;
  font-size: 32px;
}

p{
  font-family: "Open Sans";
  font-weight: 400;
  font-size: 15px;
  line-height: 24px;
  margin-top: 20px;
}

button{
  margin-top:20px;
  font-family: "Poppins";
  font-size: 12px;
  font-weight: 300;
  width: 90px;
  padding: 5px;
  height: auto;
  color: #34495e;
  text-decoration: none;
  background-color: white;
  border: 0px;
  border-radius: 50px;
}

button:hover{
  background-color: #2c3e50;
  color: #fff;
  cursor: pointer;
}

.social{
  border: solid orange;
  width: 90%;
  margin: 0px auto auto auto;
  display: flex;
  justify-content: flex-end;
}

.social ul{
  display:flex;
}

.social > ul > li{
  list-style: none;
  border: 1px white solid;
  border-radius: 100%;
  width: 30px;
  height: 30px;
  margin-left: 1vw;
  display:flex;
  justify-content:center;
  align-items: center;

}

.social > ul > li > a{
  font-size: 12px;
  color: #fff;
}

@media screen and (max-width: 600px) {
  .main_imageholder{grid-area: main_imageholder;}
  .textholder{grid-area: textholder;}
  .main{
    grid-template-areas:
      'main_imageholder main_imageholder'
      'textholder textholder'
  }
  
  .social{
    justify-content: center;
  }
}
1
cjtem 7 Juli 2020, 08:55

1 menjawab

Jawaban Terbaik

Anda menentukan pemilih tipe di bit pertama (tipe simpul 'utama') dan dalam kueri media Anda menentukan pemilih tipe kelas (simpul dengan kelas 'utama'). Ini hanya salah ketik. Hapus titik sebelum 'utama' di kueri media css.

Ex:

@media screen and (max-width: 600px) {
  .main_imageholder{grid-area: main_imageholder;}
  .textholder{grid-area: textholder;}
  main{
    grid-template-areas:
      'main_imageholder main_imageholder'
      'textholder textholder'
  }
  
  .social{
    justify-content: center;
  }
}
0
James 7 Juli 2020, 15:23