모바일과 PC의 푸터를 다르게 설정하려면 어떻게 해야할까요?

안녕하세요!

검색해도 잘 안나오고.. 어디 물어봐야할지도 잘 모르겠어서 질문드려요!

 

엘리멘터 사용해서 홈페이지 구성중인데 하단 푸터가

PC버전에서는 괜찮게 보이는데 모바일로 가면 너무 여러줄로 길게 나와서..

 

혹시 PC버전과 모바일의 푸터를 다르게 설정하는 방법 좀 알 수 있을까 해서 질문드립니다!

 

부탁드릴게요..!

좋은 정보와 인맥을 동시에, 워드프레스 사용자 단톡방 참여하기
좋은 정보와 인맥을 동시에, 워드프레스 사용자 단톡방 참여하기
  • 안녕하세요~^^

    워드프레스 사이트에서 푸터(footer)는 테마 쪽에서 표시하고 있습니다.

    테마에 관련 설정이 있는지 찾아보셔야 할 듯합니다.

     

    관련 설정이 없다면 테마 쪽 footer.php 파일을 수정하셔야 할 듯합니다.

    테마 푸터를 수정하시려면

    워드프레스 관리자 -> 외모(테마 디자인) -> 테마 편집기 페이지에서 footer.php 파일을 수정해보시겠어요?

    또는 FTP로 접속해서 /wp-content/themes/사용중인테마/footer.php 파일을 수정해보세요.

    테마 제작자에게도 가능한 방법이 있을지 문의해보시는 게 좋을 듯합니다.

     

    워드프레스 테마 메뉴얼도 참고해보세요.

    https://codex.wordpress.org/Theme_Development

     

    CSS 미디어 쿼리를 사용하시면 모바일 레이아웃을 다르게 표시할 수 있습니다.

    PC 화면과 모바일 화면에서 다른 레이아웃을 표시하는 간단한 예제 코드를 작성해봤습니다.

    아래의 코드를 활용해보시겠어요?

    <style>
    .mobile { display: none; }
    
    @media screen and (max-width: 600px) {
    	.pc { display: none; }
    	.mobile { display: block; }
    }
    </style>
    
    <div class="pc">pc 화면에서만 보입니다.</div>
    <div class="mobile">mobile 화면에서만 보입니다.</div>

     

    미디어 쿼리 관련해서는 구글에 검색해보시면 많은 자료가 있습니다.

    아래의 링크로 참고해보시겠어요?

    https://developer.mozilla.org/ko/docs/Web/Guide/CSS/Media_queries

    고맙습니다.

이미지 사진은 imgur에 업로드한 뒤 링크 걸어주세요.
좋은 정보와 인맥을 동시에, 워드프레스 사용자 단톡방 참여하기