자동등록방지 모바일 크기
본문
자동등록방지 크기가 피시는 적당합니다.
그런데
모바일에서 너무 크게 나오네요.
어디에서 크기를 조정하면 되나요?
감사합니다.
<?php if ($captcha_html) { //자동등록방지 ?>
<li class="list-group-item">
<div class="form-group row mb-0">
<label class="col-md-2 col-form-label">자동등록방지</label>
<div class="col-md-10 f-small">
<?php echo $captcha_html; ?>
</div>
</div>
</li>
<?php } ?>
답변 3
스타일에 태그를 추가하여 모바일 크기를 조정하세요.
200px로 조정된 예~
/* 기본 스타일 (PC 환경) */
.col-md-10 img {
max-width: 100%; /* 컨테이너에 맞춤 */
height: auto;
}
/* 모바일 최적화 (768px 이하) */
@media (max-width: 768px) {
.col-md-10 img {
width: 200px; /* 원하는 크기로 조정 */
height: auto;
}
}
<label class="col-6 col-md-2 col-form-label">자동등록방지</label>
<div class="col-6 col-md-10 f-small">
<?php echo $captcha_html; ?>
</div>
휴대폰에서는 적용이 안되는 이유가 있나요?
아이폰 및 안드로이드 폰 양쪽에서
스타일을 변경했는데 기존 그대로 보입니다.
여러번 새로고침 했습니다.
알려주신 코드도 이용해보고 아래의 코드도 이용해보고 했는데
PC에서는 변경이 되는데 휴대폰에서 변경이 안됩니다.
역시 모바일 피시 분기해서도 해보았는데
아이폰 및 안드로이드 폰에서 적용이 안됩니다.
모바일(아이폰/안드로이드폰)에서는 어떤 다른 경우가 있는지요?
감사합니다.
<style>
#captcha {
display: inline-block;
position: relative;
}
html, h1, h2, h3, h4, h5, h6, form, fieldset, img {
margin: 0;
padding: 0;
border: 0;
}
#captcha #captcha_key {
margin: 0 0 0 3px;
padding: 0 3px; /* Reduced padding */
width: 80px; /* Reduced width */
height: 30px; /* Reduced height */
border: 1px solid #ccc;
background: #fff;
font-size: 1em; /* Reduced font size */
font-weight: bold;
text-align: center;
border-radius: 3px;
vertical-align: top;
}
#captcha #captcha_mp3 {
margin: 0;
padding: 0;
width: 30px; /* Reduced width */
height: 30px; /* Reduced height */
border: 0;
background: transparent;
vertical-align: middle;
overflow: hidden;
cursor: pointer;
background: url(../../img/captcha2.png) no-repeat;
text-indent: -999px;
border-radius: 3px;
}
#captcha #captcha_reload {
margin: 0;
padding: 0;
width: 80px; /* Reduced width */
height: 30px; /* Reduced height */
border: 0;
background: transparent;
vertical-align: middle;
overflow: hidden;
cursor: pointer;
background: url(../../img/captcha2.png) no-repeat 0 -40px;
text-indent: -999px;
border-radius: 3px;
}
#captcha #captcha_info {
display: block;
margin: 5px 0 0;
font-size: 0.8em; /* Reduced font size */
letter-spacing: -0.1em;
}
#captcha #captcha_img {
height: 30px;
border: 1px solid #898989;
vertical-align: top;
padding: 0;
margin: 0;
}
#captcha legend {
position: absolute;
margin: 0;
padding: 0;
font-size: 0;
line-height: 0;
text-indent: -9999em;
overflow: hidden;
}
</style>
<?php if ($captcha_html) { //자동등록방지 ?>
<li class="list-group-item">
<div class="form-group row mb-0">
<label class="col-md-2 col-form-label">자동등록방지</label>
<div class="col-md-10 f-small">
<?php echo $captcha_html; ?>
</div>
</div>
</li>
<?php } ?>