현재 AVADA테마를 이용해서 반응형웹을 만들고 있습니다. 그런데 문제는 PC화면으로 봤을때는 홈페이지가 괜찮게 나오는데 모바일로 봤을 때는 매우 어색하게 보입니다. 혹시 가로폭이 일정 길이 이하로 떨어지면 제가 미리 지정한 레이아웃이 노출되게끔 할 수 있는 기능이나 명령어가 있을까요?
안녕하세요~^^
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
고맙습니다.
조언 감사 드립니다!