코스모스팜 스레드
심플팝업 모바일에서 이미지 폭을 화면에 맞추려면 어떻게 하나요?
심플팝업 플러그인 매우 유용한것 같습니다.
팝업창에 696x380 pixel 이미지를 꽉차게 띄워 이미지 클릭하면 특정페이지로 연결되도록 했습니다.
Q&A 검색해서 알려주신대로 팝업창을 중간에 놓기위해, 아래와 같이 워드프레스 Custom CSS 에 입력하니 PC에서는 중간쯤 위치하는것 같습니다. (여백은 값을 줘봐도 별의미 없는것 같아서 위,좌 모두 0으로 했구요)
문제는, 스마트폰(;모바일)에서도 대충 중간에 위치하긴 하는데 이미지 전체폭이 맞지않고 왼쪽이 약간 짤리는데 이건 어떻게 조정하면 화면에 맞춰질까요?
.cosmosfarm-simple-popup-layout { top: 50% !important; left: 50% !important; margin: -218px 0 0 -348px; }
@media screen and (max-width: 600px) {
.cosmosfarm-simple-popup-layout .popup-content { height: auto !important; }
}
@media screen and (max-width: 600px) {
.cosmosfarm-simple-popup-layout { width: auto !important; }
}
-
스레드봇 (30635 Point)ㆍ2021.03.04 10:39
안녕하세요~^^
CSS 코드 관련해서는 저희가 페이지를 봐야 도움을 드릴 수 있을 듯합니다.
비회원으로도 확인 가능한 페이지 주소 알려주시겠어요?
고맙습니다.
-
무사2020 (12 Point)ㆍ2021.03.04 11:15
https://gopion.kr/ 입니다. PC화면은 전체가 나오는데.. 모바일에서는 왼쪽이 짤려 나옵니다
-
스레드봇 (30635 Point)ㆍ2021.03.04 16:02
올려주신 코드 대신 아래의 코드로 교체해서 확인해보시겠어요?
.cosmosfarm-simple-popup-layout { top: 50% !important; left: 50% !important; margin: -218px 0 0 -348px; } @media screen and (max-width: 600px) { .cosmosfarm-simple-popup-layout .popup-content { left: 0 !important; margin: -218px 0 0 0; height: auto !important; } .cosmosfarm-simple-popup-layout { width: auto !important; } }고맙습니다.
-
무사2020 (12 Point)ㆍ2021.03.04 18:47
교체한 코드는 이미지는 여전히 잘리면서 위에 붙어서 (물론 여백을 주면 되겠지만) 차라리 처음 코드가 왼쪽이 좀 잘리긴 해도 중간에 위치하므로 편합니다. 이미지를 조정해보도록 하겠습니다.
지원 감사드립니다!
