다음으로 About Me 영역은 본문의 왼쪽과 오른쪽 너비를 100%로 변경합니다.
13/end/css/media.css - 해상도 1140px 이하일 때 About Me 영역
@media screen and (max-width:1140px){
(중략)
/* About Me 영역 왼쪽 너비 50% -> 100% 변경 */
section .about-self .left{
width:100%;
margin-bottom:1.5rem;
}
/* About Me 영역 오른쪽 너비 50% -> 100% 변경 */
section .about-self .right{
width:100%;
padding:0;
}
}
CSS 코드를 적용하고 나면 화면 너비가 1140px보다 작아질 때 화면이 다음처럼 보입니다.
그림 13-18 About Me 영역 반응형 처리 결과