스팸필터 모듈의 구글 리캡차는 매우 유용한 기능인데요.
이게 사이즈 문제 때문에 골치가 아플 때가 있습니다.
요소 안에 아이프레임이 들어오는 방식이기 때문에 요소 사이즈나 폰트 사이즈를 직접 제어하기가 어렵다는 문제입니다.
가령 모바일에서 가로 폭이 좁아지는 경우에는 padding값 같은 것 때문에 캡차 요소의 사이즈가 디바이스 바깥으로 침범하는 경우도 있죠.
그래서 스팸필터 모듈에서 캡차 크기를 작은 것으로도 해보는데요.
그렇게 되면 한글에 최적화된 게 아니다보니 "로봇이 아닙니다"에서 글자 '다'가 아래줄로 내려오게 됩니다ㅜ
(그럴 때는 구글링...)
이럴 때 .g-recaptcha 요소에 scale 속성을 주는 것만으로도 제법 효과를 볼 수 있습니다.
캡차 크기가 '일반' 사이즈라 하더라도요.
바로 이렇게 하면
.g-recaptcha { transform:scale(0.7); transform-origin:0 0; }
되는 거죠.
0.7 정도면 모바일에서 padding값이 어지간하더라도 버텨볼 만할 겁니다ㅎ
(그래도 디바이스 사이즈를 넘치면 숫자를 더 줄이면 되구요)
다만 캡차 요소를 가운데 정렬을 하는 경우에는 요소 크기가 줄어들므로 가운데에서 좌측으로 쏠리는 효과가 생길 겁니다.
그럴 때는 이런 식으로 하면 좋습니다.
.g-recaptcha {
display: flex;
justify-content: center;
transform: scale(0.7);
transform-origin: 0 0;
width: calc(100% / 0.7);
}