AI에 의해 자동 생성된 답변이에요 😀

안녕하세요. 코스모스팜, KBoard, 우커머스 워드프레스 전문가입니다.

코스모스팜 회원관리 Three 스킨의 로그인 창 가로 사이즈가 의도보다 작게 출력되는 현상은 CSS를 통해 직접 조정하실 수 있습니다. Three 스킨은 디자인 특성상 기본 너비가 제한되어 있을 수 있으므로, 아래의 방법을 참고하여 수정해 보시기 바랍니다.

수정 방법 안내

1. 워드프레스 관리자 페이지에 접속합니다.

2. 외모(테마 디자인) 메뉴에서 사용자 정의하기를 선택합니다.

3. 추가 CSS 메뉴를 클릭합니다.

4. 아래의 코드를 입력하고 저장합니다.

적용할 CSS 코드

.cosmosfarm-members-form {

width: 100% !important;

max-width: 500px !important;

margin: 0 auto !important;

}

참고 사항

· max-width: 500px 부분의 숫자를 원하는 가로 사이즈(예: 600px 또는 100%)로 변경하여 조절해 보시기 바랍니다.

· 만약 위 코드로 해결되지 않는다면, 사용 중인 테마의 레이아웃 설정이나 다른 플러그인과의 CSS 충돌 여부를 확인해야 할 수 있습니다.

· 이미지 자산은 제공된 소스 내에 존재하지 않아 별도로 첨부해 드리지 못하는 점 양해 부탁드립니다.

추가적인 도움이 필요하시면 언제든 말씀해 주세요.

↓ 아래 버튼을 눌러서 피드백해주세요.

아래와 같이 코드가 적용되어 있는데, 위 CSS를 넣어도 변경되지 않습니다. 조정하려면 어떻게 해야 할까요?

 

<div class="e-con-inner">
                <div class="elementor-element elementor-element-cc3650b elementor-widget elementor-widget-shortcode" data-id="cc3650b" data-element_type="widget" data-e-type="widget" data-widget_type="shortcode.default">
                            <div class="elementor-shortcode"><div class="cosmosfarm-members-form signin-form three">
    <form method="post" action="/login/">
        <input type="hidden" name="redirect_to" value="/">
        <input type="hidden" name="a" value="login">
        
        <div class="login-card">
            <div class="login-header">
                <h2>로그인</h2>
                <p class="login-subtitle">환영합니다! 로그인해 주세요.</p>
            </div>

            <div class="login-body">
                <div class="form-group">
                    <label for="log" class="screen-reader-text">
                        아이디                    </label>
                    <input type="text" id="log" name="log" class="form-control" placeholder="아이디" required="">
                </div>
                
                <div class="form-group">
                    <label for="pwd" class="screen-reader-text">비밀번호</label>
                    <input type="password" id="pwd" name="pwd" class="form-control" placeholder="비밀번호" required="">
                </div>
                
                <div class="form-actions">
                    <label class="remember-me">
                        <input type="checkbox" id="rememberme" name="rememberme" value="forever">
                        <span>자동로그인</span>
                    </label>
                    
                                    </div>

                <button type="submit" class="btn-submit">로그인</button>
                
                <div class="social-login-section">
                                    </div>
            </div>

            <div class="login-footer">
                                <span class="text-account">아직 회원이 아니신가요?</span>
                <a href="https://hoisil9.com/join-regist/?redirect_to=%2F" class="link-register">회원가입</a>
                            </div>
        </div>
    </form>
</div></div>
                        </div>
                    </div>

원인은 CSS 코드의 문제가 아니라, 엘리멘터 컨테이너의 플렉스박스(Flexbox) 정렬 설정 때문이었네요. 해결했습니다.