심플팝업 모바일에서 이미지 폭을 화면에 맞추려면 어떻게 하나요?

심플팝업 플러그인 매우 유용한것 같습니다.

팝업창에 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; }
}

좋은 정보와 인맥을 동시에, 워드프레스 사용자 단톡방 참여하기
좋은 정보와 인맥을 동시에, 워드프레스 사용자 단톡방 참여하기
  • 안녕하세요~^^

    CSS 코드 관련해서는 저희가 페이지를 봐야 도움을 드릴 수 있을 듯합니다.

    비회원으로도 확인 가능한 페이지 주소 알려주시겠어요?

    고맙습니다.

  • https://gopion.kr/ 입니다. PC화면은 전체가 나오는데.. 모바일에서는 왼쪽이 짤려 나옵니다

  • 올려주신 코드 대신 아래의 코드로 교체해서 확인해보시겠어요?

    .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; }
    }

    고맙습니다.

  • 교체한 코드는 이미지는 여전히 잘리면서 위에 붙어서 (물론 여백을 주면 되겠지만) 차라리 처음 코드가 왼쪽이 좀 잘리긴 해도 중간에 위치하므로 편합니다. 이미지를 조정해보도록 하겠습니다.

    지원 감사드립니다!

이미지 사진은 imgur에 업로드한 뒤 링크 걸어주세요.
좋은 정보와 인맥을 동시에, 워드프레스 사용자 단톡방 참여하기