안녕하세요.
KBoard 게시판 내 음원듣기 버튼 클릭시 유튜브영상 팝업되며 볼 수 있도록 설정되어있습니다.
PC버전은 괜찮으나 모바일, 태블릿으로 봤을때 아래 imgur 사진과 같이 크기가 너무 작게 나옵니다.
https://imgur.com/CeA550Z
http://www.trendymusic.co.kr/hertzmuzik_2nd/hertz_election-logo-song1/hertz_election-logo-song2/#special
해당되는 페이지의 링크입니다. 적응형 설정의 문제일까요?
어떤 구조로 작성되어 있는지
알 수 없어 정확한 답변을 드리기가 어렵습니다.
개발자 도구로 확인한 코드 내에서는
아이프레임 내의 lg 클래스를 가진 div의 margin-left 값과 max-width 값이
영향을 주는 듯 합니다.
위 값들을 변경하면 버튼의 크기가 변경됩니다.
아래의 코드를 테마 추가 css에 입력해보시겠어요?
@media screen and (max-width: 768px){
.lg-outer .lg {
margin-left: auto !important;
max-width: 100% !important;
}
}
고맙습니다.
기재해주신 코드를 css 입력해보았으나 팝업창의 크기에는 변화가 없어 재문의 드립니다.
아래는 기존 사용중이던 css 코드입니다.
@media screen and (max-width: 768px) {
.tg-mobile-navigation {
width: 180px;
opacity: 0.9;
}
}
.evf-submit-container {
text-align: right;
}
.elementor-column-wrap {
text-align: center;
}
.wpcf7 form .wpcf7-response-output{
border: 0px;
font-size: 0.8em;
}
.wpcf7-not-valid-tip {
font-size: 0.8em;
color: white;
}
.tg-submenu-toggle{
color: #ff009c;
margin-right: 25px;
margin-bottom: 5px;
}
팝업창 크기 조절에 대해 수정가능한 부분이 더 있을까요?
안녕하세요~^^
css가 아래와 같이 적용되어 있어
모바일에서도 화면의 크기에 비례하여 표시되는 듯 합니다.
.lg-outer .lg {
position: relative;
overflow: hidden;
margin-left: 49%;
margin-right: auto;
max-width: 25%;
max-height: 100%;
}
아래 코드를 테마 추가 css에 입력해보시겠어요?
@media screen and (max-width: 768px){
.lg-outer .lg {
margin-left: 10%;
max-width: 40%;
}
}
고맙습니다.