@media에서의 flex-direction: column으로 세... - 인프런

안녕하세요 선생님!

수업 잘 듣고 있습니다.

질문이 있어 글을 작성합니다.

강의와 같이 코드를 작성하였습니다.

@media (max-width: 768px) {
    .modal-content {
        flex-direction: column;
        width: 100%;
    }
}

위처럼

@media (max-width: 768px) { .modal-content { flex-direction: column; width: 100%; } }

를 작성하면 모바일에서 확인 시 새로 배치가 되어야 하는 것 같은데...

하단 이미지와 같이 가로 배치 그대로 유지 됩니다. 무엇이 문제일까요 ㅠㅠ

전체 코드는 아래와 같습니다.

  <body>
    <div class="modal">
      <div class="modal-content">
        <div class="photo"></div>
        <div class="desc">
          <div class="desc-header">
            <h2>지금 다양한 혜택을 받아보세요.</h2>
            <button class="btn-close">&times;</button>
          </div>
          <div class="desc-content">
            <input type="email" placeholder="이메일 주소를 입력하세요." />
            <button>뉴스레터 구독하기</button>
            <p>
              스타트업메이트 뉴스룸의 다양한 소식과 혜택을 이메일로 받아
              보시려면 구독 신청 해주시기 바랍니다. 스타트업메이트에 대해 알고
              싶은 뉴스, 꼭 알아야 할 뉴스를 신속하고 정확하게 전합니다.
            </p>
          </div>
        </div>
      </div>
    </div>
    <div class="overlay"></div>
  </body>

* {
    box-sizing: border-box;
    font-family: "Noto Sans", sans-serif; 
}
body {
    font-weight: 300;
    color: #222;
    font-size: 15px;
    line-height: 1.6em;

}
a {
    color:#222;
    text-decoration: none;
}
.modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0 0 10px rgb(0, 0, 0, 00.15);
    z-index: 10;
    overflow: hidden;
}
.modal-content {
    /* border: 1px solid #000; */
    width: 600px;
    display: flex;
}
.modal-content > div {
    padding: 20px;
}
.photo {
    flex:1;
    background: url(/img/office.jpg) no-repeat center right;
    background-size: cover;
}
.desc {
    flex:2;
    text-align: center;
}
.overlay {
    background-color: hwb(0 0% 100% / 0.212);
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}
.btn-close {
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: transparent;
    border: none;
    font-size: 18px;
    color: #999;
    cursor: pointer;
}
.btn-close:hover {
    color: #000;
}
.desc-content input[type=email] {
    display: block; 
    width: 100%;
    text-align: center;
    padding: 7px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    outline: none;
}
.desc-content input[type=email]::placeholder{
    color:#ccc;
    transition: .5s;
}
.desc-content input[type=email]:focus::placeholder{
    visibility: hidden;
    opacity: 0;
}
.desc-content button {
    display: block;
    width: 100%;
    border: none;
    background-color: crimson;
    color: #fff;
    cursor: pointer;
    padding: 7px;
}

@media (max-width: 768px) {
    .modal-content {
        flex-direction: column;
        width: 100%;
    }
}

인프런 커뮤니티 질문&답변

@media에서의 flex-direction: column으로 세로배치 관련 질문드립니다.