Skip to Content
Go Back
안형우

안녕하세요. 14년차 풀스택 웹개발자 안형우입니다. 이 블로그에서는 WordPress, PHP, CSS, 사용성, 리눅스 서버 등 풀스택 웹개발에서 마주하는 다양한 문제 상황과 해결책, 필요한 개념들을 다룹니다. 👉 소개


작업물

📌 워드프레스, 답답한 빌더와 플러그인 대신 시원하게 커스터마징하기(강의) 2023-01-15
📌 아무도 말하지 않는 PHP의 좋은 점 2018-10-13
📌 유지보수하기 쉬운 CSS 전략(슬라이드) 2016-12-20
📌 워드프레스 테마에서 템플릿 파일 매칭 순서 2013-05-12
📌 [번역] CSS 코드 냄새 2013-01-01

[fancyBox2] 모바일 문제 해결하기 – 위치가 이상해지는 것

이 해결책은 팬시박스1에 대한 해결책은 아니다. 그러나 1에도 적용할 수 있을지 모르겠다. 난 안 해 봤으니 모르겠고. (팬시박스2의 주요 변경사항)

그런데 팬시박스2에서도 모바일 화면에서 문제가 생긴다. 아이폰에서 화면을 확대하면 팬시박스로 떠 있는 놈이 화면 밖으로 튀어나가 버리는 문제다.

CSS의 fixed 프로퍼티 때문에 발생하는 문제인데, 확대했을 때의 top, left 픽셀이 비율에 맞게 함께 조정되면서 생기는 문제인 것 같다. (무슨 말인지 모르겠으면 문제 진단은 패스하고.)

해결책은 의외로 간단하다. 스타일에 다음을 추가해 준다.

.fancybox-wrap{
	position: absolute !important;
}

그러면 아래처럼 깔끔하게 볼 수 있다.

실제 적용된 걸 보고 싶다면 : 레프트21 갤러리 “파업 결의하는 금속 노동자” 바로 가기

안녕하세요. 14년차 풀스택 웹개발자 안형우입니다. 이 블로그에서는 WordPress, PHP, CSS, 사용성, 리눅스 서버 등 풀스택 웹개발에서 마주하는 다양한 문제 상황과 해결책, 필요한 개념들을 다룹니다. 👉 소개


작업물

답글 남기기

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다