안녕하세요!
검색해도 잘 안나오고.. 어디 물어봐야할지도 잘 모르겠어서 질문드려요!
엘리멘터 사용해서 홈페이지 구성중인데 하단 푸터가
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
고맙습니다.