important 속성을 적용해보시겠어요?

적용 방법은 구글에 css important 키워드로 검색해보세요.

모바일 기기에서 로그인 페이지 레이아웃이 깨지는 문제는

저희 고객지원 쪽 이메일로 확인 가능한 페이지 주소 보내주시면 살펴보겠습니다.

CSS 코드 수정의 경우에는 이전 댓글들에서도 말씀드린 것처럼

이미지만 봐서는 도움을 드리는 데 한계가 있습니다.

고맙습니다.

로그인 문구 정렬 문제로 계속 고민하고 있는데요....

개발자도구 사이즈를 키우고 줄이면서 보고 있는데요,

버튼이 특정 사이즈보다 작을때에는 정상적으로 계속 가운데 정렬이 되는데, 

문구가 커지게 되면 왼쪽에 멈춰있어요..

버튼 두개가 따로 노는 느낌인것도 같고 그렇네요.

링크 첨부합니다.

https://imgur.com/L2HyMTK

페이지를 특정대상 인원에게 제한 제공하고 있어서..

일단은 혼자 해보려고 합니다... 속상하네요..

근데 개발자 도구를 사용하면서 보니, 패딩을 수정해도 패딩에 취소선이 그어져 있는데요.

링크 이미지처럼 나옵니다. https://imgur.com/08g2QlJ

어떻게든 하고 싶긴해서 이것저것 다 알아보고 싶은데요.

혹시 패딩의 기능이 제한이 풀리도록 할 수 있는 방법은 없을까요?!

저희가 페이지를 봐야 도움을 드릴 수 있습니다.

고맙습니다.

일단 말씀해주신 코드로 패딩을 조절하여도, 모바일에는 반영이 되지 않네요ㅜㅠㅜㅠㅠㅠ

혹시나 하는 마음으로 

@media screen and (max-width: 600px) {
    .cosmosfarm-members-form .form-top .form-top-wrap .form-top-button .login-button { text-align: center; }
}

얘를 해보았는데도 반영이 되지 않습니다..

위 내용 관련하여 F12로 확인하고 있는데요,

text-align 부분에 사용자 에이전트 스타일시트라고 적혀있는데요!

혹시 이게 모바일에서 정렬이 되지 않는사항에 영향이 있을까요?!

예측해보자면 정렬이 정상적으로 되지 않는 건 padding 속성 문제일 수도 있습니다.

아래의 코드를 추가해서 padding 속성을 0으로 설정해보시겠어요?

@media screen and (max-width: 600px) {
	.cosmosfarm-members-form .form-top .form-top-wrap .form-top-button .login-button { padding: 0; }
}

고맙습니다.

네네, 다른 글 찾아보다가 F12에 대한 내용 확인하고, 활용하면서 여러 방법을 찾아보고 있는데요!

이 로그인 버튼 문구가 피씨에서는 정상적인 모습으로 나오거든요!

혹 위에 말씀해주신 것 처럼 미디어 쿼리로 적용가능한 부분이 있을까요?

미디어 쿼리를 적용해주시면 됩니다.

아래의 CSS 코드도 추가해보시겠어요?

@media screen and (max-width: 600px) {
	.cosmosfarm-members-form .form-top .form-top-wrap .form-input-row label { width: 100%; }
	.cosmosfarm-members-form .form-top .form-top-wrap .form-input-row input { width: 100%; }
}

로그인 버튼 문구가 가운데 정렬되지 않는 건

사용 중이신 테마 쪽에서 과도하게 CSS 코드를 적용하고 있을 가능성이 높습니다.

크롬 브라우저 개발자 도구(F12)를 활용하시면

CSS 속성을 쉽게 찾을 수 있고 미리 테스트해보실 수 있습니다.

고맙습니다.

어제 말씀해주신대로 변경을 했는데요, 모바일에서 확인하는 경우 텍스트박스 크기 등 문제가 있어서 다시 한번 도움 요청을 드리고자 합니다!

어제 하루 종일 CSS로 사이즈 변경을 해보려고 했는데, 쉽지가 않네요!

PC 화면에서는 정상적으로 표기되는데,

모바일 화면에서는 로그인 창이 반토막나고 로그인 버튼의 문구도 가운데 정렬이 되지 않아요ㅜㅜ

https://imgur.com/gallery/gHwLcNr

(회사 서버 보안때문에 모바일로 올렸는데 제대로 업로드 된지 모르겠네요.)

text-align 다 만져봐도 해결이 되지 않네요.. 사실 뭐 PC는 정상적으로 표기 되니...

혹 모바일 버전에 추가 적용 되는 CSS도 있을까요?!

알려주신 값으로 적용했더니 제대로 반영되네요!

감사합니다 ;)

코드 상에는 문제가 없는데요.

혹시 CSS 코드 문제는 아닌지 확인해보시겠어요?

워드프레스 관리자 -> 외모 -> 사용자 정의하기 -> CSS 입력 필드에

아래의 코드를 추가해보세요.

.cosmosfarm-members-form .form-top .form-top-wrap .form-input-row label { width: 180px; }
.cosmosfarm-members-form .form-top .form-top-wrap .form-input-row input { width: 230px; }

고맙습니다.

위의 사원번호/비밀번호 라벨 변경이 너무 어렵네요.

상기 작성된 코드에서 어떤 부분이 문제인지 알려주시면 감사하겠습니다!

알려주신 gettext 필터로 로그인폼 문구 수정을 진행했는데요.

하기 링크의 이미지처럼 아래 내용들은 바뀌었는데, '사원번호/비밀번호' 요 내용이 변경되지 않네요.

무엇이 잘못되었을까요?

https://imgur.com/DKjtMhy

add_filter('gettext', 'gettext_20200824', 999, 3);
function gettext_20200824($translated_text, $text, $domain){
    if($domain == 'cosmosfarm-members'){
        switch($translated_text){
            case '사원번호': $translated_text = '사원번호 (Employee NO)'; break;
            case '비밀번호': $translated_text = '비밀번호 (Password)'; break;
            case '로그아웃': $translated_text = '로그아웃 (Logout)'; break;
            case '아바타 변경': $translated_text = '사진 등록 (Add Image)'; break;
            case '자동로그인': $translated_teigxt = ' 자동로그인 (Auto Login)'; break;
            case '로그인': $translated_text = '로그인 (Login)'; break;
            case '비밀번호 찾기': $translated_text = '비밀번호 찾기 (Forgot Password)'; break;
            case '회원가입': $translated_text = '회원가입 (Sn Up)'; break;
        }
    }
    return $translated_text;
}

추가로, 녹색으로 표시된 로그인버튼 크기를 비밀번호찾기버튼 크기와 동일하게 만들수 있나요?

올려주신 이미지는 코스모스팜 회원관리 플러그인 로그인 페이지입니다.

그렇기 때문에 로그인 페이지에서 문구 수정은

gettext 필터 쪽에서 적용해주셔야 합니다.

아래 링크들도 참고해보시겠어요?

워드프레스 로그인 화면 디자인 수정 방법
워드프레스 회원가입 화면 디자인 수정 방법 - WP-Members 플러그인

고맙습니다.