코스모스팜 스레드

모바일 버전의 레이아웃을 예쁘게 만들기

현재 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

    고맙습니다.

  • 조언 감사 드립니다!

이미지 사진은 imgur에 업로드한 뒤 링크 걸어주세요.
무제한으로 웹사이트를 만드세요. (코스모스팜 무제한 라이센스)