모바일 화면에서는 정상적으로 표시되고 있는 듯합니다.

PC 화면에도 적용하시려면

아래의 코드 대신

@media screen and (max-width: 600px) {
	.cosmosfarm-social-login .cosmosfarm-social-login-title { display: block; margin: 0 auto; width: 50%; }
}

아래의 코드로 적용해보시겠어요?

.cosmosfarm-social-login .cosmosfarm-social-login-title { display: block; margin: 0 auto; width: 50%; }

고맙습니다.

지시대로 다음과 같이 코드를 넣었지만, 동그란 버튼들이 한줄아래로 내려가질 않네요.

@media screen and (max-width: 600px) {
article.post-545.page .entry-content { padding: 0; }
.cosmosfarm-social-login .cosmosfarm-social-login-title { display: block; margin: 0 auto; width: 50%; }
}

그럼 계속해서 조언 부탁드리겠습니다. 

올려주신 이미지에서 여백만 없애시려면

이전 댓글에 안내해드린 코드 중 아래의 코드를 지워보시겠어요?

article.post-545.page header { display: none; }

소셜 로그인 버튼만 밑으로 내리시려면

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

@media screen and (max-width: 600px) {
	.cosmosfarm-social-login .cosmosfarm-social-login-title { display: block; margin: 0 auto; width: 50%; }
}

고맙습니다.

https://www.evernote.com/l/ACtyOZsxKwdGB677IaS3z1ylb0E3ahBj7Pk/

모바일로 봤을 때, 초록색 영역만 한줄 밑으로 배치하려면 어떻게해야 하나요?

●PS

크롬 브라우저의 개발자 도구를 사용해도 제 능력으로는 해결되지 않는 부부만 질문드리고 있음을 고백합니다.(◕ω◕)

로그인 페이지를 모바일에서만 올려주신 이미지처럼 표시하시려면

워드프레스 관리자 -> 외모(테마 디자인) -> 사용자 정의하기 -> CSS 입력 필드에

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

@media screen and (max-width: 600px) {
	article.post-545.page header { display: none; }
	article.post-545.page .entry-content { padding: 0; }
}

크롬 브라우저의 개발자 도구(F12키)를 사용하시면 CSS 속성을 쉽게 찾고 테스트해보실 수 있습니다.

고맙습니다.