Portfolio 실습 3 : Admin Page 관련 질문입니다

[이재륜]

창을 줄이게 되면 아래처럼 박스가 아래로 내려가버리고 Dashboard글자가 따로놀게 되는데 이를 해결하지 못하여 질문드립니다.

코드를 첨부했습니다.

<div class="dashboard">
      <h1>Dashboard</h1>
      <div class="row">
        <div class="col-md-3">
          <div>
            <p class="fs-3">Earnings (Monthly)</p>
            <h4>$400,000</h4>
          </div>
          <i class="fa-solid fa-calendar fs-1"></i>
        </div>
        <div class="col-md-3">
          <div>
            <p class="fs-3">Earnings (Monthly)</p>
            <h4>$400,000</h4>
          </div>
          <i class="fa-solid fa-calendar fs-1"></i>
        </div>
        <div class="col-md-3">
          <div>
            <p class="fs-3">Earnings (Monthly)</p>
            <h4>$400,000</h4>
          </div>
          <i class="fa-solid fa-calendar fs-1"></i>
        </div>
        <div class="col-md-3">
          <div>
            <p class="fs-3">Earnings (Monthly)</p>
            <h4>$400,000</h4>
          </div>
          <i class="fa-solid fa-calendar fs-1"></i>
        </div>
      </div>
    </div>

.dashboard {
  
  .row  {
    display: flex;
    justify-content: center;
  }
  .col-md-3 {
    margin: 20px;
    background-color: white;
    border-radius: 6px;
    border-left: 3px solid skyblue;
    width: 350px;
    height: 150px;
    display: flex;
    align-items: center;
    i {
      margin-left: 30px;
    }
  }
}

[codingapple]

부트스트랩 클래스들 쓸거면 굳이 또 display flex 넣을 필요는없습니다
css 굳이 넣을거면 특정사이즈에선 width 50%로 하면 박스들이 반반씩 차지할듯요

[이재륜]

부트스트랩을 이용하지 않고 한번 다시 코드를 작성해보았습니다 

<div class="container">
    <h2>Dashboard</h2>
    <div class="container-box">
      <div class="box">
        <div>
          <h3>Earnings (Monthly)</h3>
          <p>$400,000</p>
        </div>
        <i class="fa-solid fa-fire"></i>
      </div>
      <div class="box">
        <div>
          <h3>Earnings (Monthly)</h3>
          <p>$400,000</p>
        </div>
        <i class="fa-solid fa-fire"></i>
      </div>
      <div class="box">
        <div>
          <h3>Earnings (Monthly)</h3>
          <p>$400,000</p>
        </div>
        <i class="fa-solid fa-fire"></i>
      </div>
      <div class="box">
        <div>
          <h3>Earnings (Monthly)</h3>
          <p>$400,000</p>
        </div>
        <i class="fa-solid fa-fire"></i>
      </div>
 
    </div>
  </div>


.container {
  height: 300px;
 
  .container-box {
    display: flex;
    justify-content: center;
  }
 
  .box {
    background-color: white;
    width: 300px;
    height: 120px;
    margin: 30px;
    display: flex;
    align-items: center;
    padding: 20px;
    border-left: 4px solid black;
    border-radius: 10px;
    box-shadow: 5px 2px 2px rgb(0, 0, 0, 0.1);
    i {
      margin-left: 50px;
      font-size: 30px;
    }
  }
 
}
 
@media screen and (max-width:768px) {
  .container-box {
    display: block;
  }  
  .box {
    display: block;
  }
}






화면을 모바일사이즈로 줄이면 display:block을 주어 한줄에 하나씩만 차지하도록 하게 하였으나 적용이 되지 않고 또한 화면을 줄일때 <h2>Dashboard</h2>가 고정되어 아래 박스들과 함께 움직이지 않습니다. 
모바일사이즈 미디어 쿼리에 flex-direction: column; 과 align-items: center;를 주면 가운데 세로정렬까지는 되기는 하나 이때 width를 주어도 동작하지 않는 이유 그리고 display:block이 안되었던 이유가 궁금합니다

• 이 답변은 이재륜에 의해 1 년, 1 월 전에 수정됐습니다.
• 이 답변은 이재륜에 의해 1 년, 1 월 전에 수정됐습니다.

[codingapple]

.container .container-box {
    display: block;
  }  
라고 써봅시다 specificity 때문이 아닐까요

[이재륜]

@media screen and (max-width:900px) {
  .container {
    .container-box {
      position: absolute;
      display: block;
      width: 600px;
  }  
  .box {
    width: 80%;
    margin: 0 auto;
    margin-top: 30px;
  }
}
  
}

말씀하신 바와 같이 수정해서 요소들은 세로로 잘 정렬이 되나 margin auto를 주어도 박스들이 화면 가운데로 정렬되지 않는데 이의 해결방안이 궁금합니다.

• 이 답변은 이재륜에 의해 1 년, 1 월 전에 수정됐습니다.
• 이 답변은 이재륜에 의해 1 년, 1 월 전에 수정됐습니다.

[codingapple]

.box 에 display block 줘봅시다

[글쓴이]

글