구글 블로그에서 모바일로 사진을 볼 때, 사진이 오른쪽으로 치우치는 현상이 있다는 걸을 알게 되었습니다. 피씨 버전으로 볼 때에는 괜찮았는데, 모바일로 보니 영 거슬리는 게 아니군요. 이를 해결하기 위해 다음과 같이 CSS 수정을 해보도록 하겠습니다.
문제의 CSS는 다음과 같은데요, 찾아보니 게시물을 작성할 때에 사진을 드래그 앤드 드롭으로 하면 자동으로 스타일이 설정되어 버리더라고요.
element.style {
margin-left: 1em;
margin-right: 1em;
}해당 부분이 요소 자체에서 설정이 되고 있는데요, !important 선언을 통하여 마진을 고정하도록 진행하겠습니다. 다음과 같은 CSS 코드를 post-body 클래스 설정 부분에 추가하였습니다. 참고로 컨템포 테마 기준입니다. 😊 아래와 같이 수정하면 문제를 해결할 수 있습니다.
.post-body a[style="margin-left: 1em; margin-right: 1em;"]{
margin-left:auto!important;
margin-right:auto!important;
}이렇게 하면 모바일에서도 사진이 페이지 중앙에 자동으로 정렬될 것입니다. 위의 코드는 'margin-left'와 'margin-right' 값을 'auto'로 설정하여, 사진이 양쪽 여백을 동일하게 가져 중앙에 배치할 것이기 때문이지요. 'important'를 사용한 이유는 기존의 스타일 설정보다 우선적으로 적용하기 위해서랍니다.