마지막으로 Contact With Me 영역도 본문이 2단으로 분리되지 않도록 다음과 같이 코드를 작성합니다.
13/end/css/media.css - 해상도 1140px 이하일 때 Contact With Me 영역
@media screen and (max-width:1140px){
(중략)
section.contact .contact-me .left{
width:100%; /* 너비 변경 30% -> 100% */
}
section.contact .contact-me .right{
width:100%; /* 너비 변경 65% -> 100% */
margin-left:0; /* 외부 여백 초기화 */
}
}
웹 브라우저 너비를 줄이면 Contact With Me 영역이 다음처럼 보입니다.
그림 13-21 Contact With Me 영역 반응형 처리 결과