PC 화면과 모바일 화면에 다른 내용을 표시하려면

미디어 쿼리를 활용해보시겠어요?

PC 화면과 모바일 화면에서 다르게 보이는 예제 코드를

간단하게 작성해봤습니다.

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

<div class="pc">PC 화면에서 노출됩니다.</div>
<div class="mobile">모바일 화면에서 노출됩니다.</div>

<style>
.mobile { display: none; }

@media screen and (max-width: 600px) {
	.pc { display: none; }
	.mobile { display: block; }
}
</style>

페이지를 원하는 대로 레이아웃을 구성하시려면

HTML과 CSS 코드에 대해 알면 도움이 되실 듯합니다.

고맙습니다.

그런데 설치 후 테마별로 적용이라는 것을 잘 모르겠습니다.

제가 워드프레스 초보자라...

저는 모바일에서는 메인사진이 뜨고 그 밑에 따로 버튼들을 만들고 싶습니다.

현재 홈페이지에는 메인사진 밑에 아이콘과 다른 사진들이 첨부되어 있지만 이걸 모바일에서는 안 나오고

위에 말씀드렸다시피 메인사진 그 다음에는 버튼들을 만들어서 사용하고 싶습니다.

이렇게 하려면 어떻게 해야 할까요?

플러그인 설치 후 설정에서 테마를 설정 한 후 그 테마에 들어가서 수정하는 법을  모르겠습니다.

다시 한번 답변 주시면 감사하겠습니다!

저희가 직접 설치해서 테스트해봤을 땐 오류 없이 정상적으로 동작하는 것을 확인했습니다.

실제 설치하셔서 문제가 있는지 충분히 테스트해보시겠어요?

고맙습니다.

이렇게 뜨는데 설치해도 괜찮을까요??

PC 홈페이지의 여백 및 간격은 어느 부분을 말씀하시는 건지요?

원하시는 모양으로 레이아웃을 수정하시려면 HTML과 CSS 코드에 대해 알면 도움이 됩니다.

어느 부분인지 말씀해주시면 CSS 코드로 수정 가능할지 살펴보겠습니다.

Any Mobile Theme Switcher 플러그인을 사용하시면

모바일 기기 별로 다른 테마를 적용하실 수 있습니다.

설치해서 테스트해보시겠어요?

고맙습니다.