그누보드 QA - 페이지 데스크탑 및 모바일 수정 했는데 모바일버전이 이상해요...

페이지 데스크탑 및 모바일 수정 했는데 모바일버전이 이상해요...

하늘로고 자기소개 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색

자기소개 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색

2019.09.18 00:17:49 조회 1800 (222.♡.♡.21)

본문

파랑이 데스크탑 index.php 파일

주황이 mobile index.php 파일 입니다.

맨 밑에 부분 말고는 다 똑같이 입력 했어요.

그리고 이미지도 각 폴더에 똑같이 넣었구요.

CSS 파일도 모바일과 디폴트 파일 내부에 똑같이 작성 했습니다.

CSS는 모바일 이미지 경로만 img/mobile/ 이처럼 모바일만 추가 했는데

데스크탑에서는 이미지가 정상적으로 나오는데 모바일에서는 이미지가 안나오는데 왜 이런거죠...

핸드폰에서 morrie27.cafe24.com 들어가시면 회색 바탕에 글씨만 나오고 있어요...

데스크탑에선 배경도 나오는데... 왜 이런거죠...

<!DOCTYPE html>
<html>
<head>

</head>
<body>

    <div>
      <div id="main">
        <div id="contents">
          <h1>Simple, One Page Design</h1>
          <p>A free lading page theme with video background</p>
          <a href="#">Get started</a>
        </div>
      </div>
    </div>

</body>
</html>

<?php
define('_INDEX_', true);
if (!defined('_GNUBOARD_')) exit; // 개별 페이지 접근 불가

if (G5_IS_MOBILE) {
include_once(G5_THEME_MOBILE_PATH.'/index.php');
return;
}

include_once(G5_THEME_PATH.'/head.php');
?>

<?php
include_once(G5_THEME_PATH.'/tail.php');
?>

<!DOCTYPE html>
<html>
<head>

</head>
<body>

</body>
</html>

<?php
if (!defined('_GNUBOARD_')) exit; // 개별 페이지 접근 불가

include_once(G5_THEME_MOBILE_PATH.'/head.php');
?>

<?php
include_once(G5_THEME_MOBILE_PATH.'/tail.php');
?>

모바일 CSS 파일 입력한거예요.

html, body{
margin:0;
padding: 0;
}

h1, p{
margin:0;
}

a{
color: inherit;
text-decoration: none;
}

#main{
background: url(http://morrie27.cafe24.com/theme/kluge/img/mobile/texture.jpg) no-repeat;
background-size: cover;
background-position: center center;
width: 100vw;
height: 100vh;
font-family: 'Questrial', sans-serif;
}

#contents{
position: absolute;
top: 50%;
transform: translateY(-50%);
width:100%;
color: white;
text-align: center;
}

#contents h1{
font-family: 'Dancing Script', cursive;
font-size: 70px;
margin-bottom: 16px;
}

#contents p{
font-size: 23px;
margin-bottom: 16px;
}

#contents a{
display: inline-block;
border:2px solid white;
border-radius: 20px;
padding:10px 20px;
font-size: 17px;
font-weight: bold;
transition: all 0.5s;
}

#contents a:hover{
background-color: red;
}

@media(max-width:769px){
#contents h1{
font-size: 50px;
}

#contents p{
font-size: 20px;
}

#contents a{
font-size: 14px;
}
}

#main-1{
background: url(http://morrie27.cafe24.com/theme/kluge/img/mobile/texture-1.jpg) no-repeat;
background-size: cover;
background-position: center center;
width: 100%;
height: 100vh;
font-family: 'Questrial', sans-serif;
}

#main-2{
background: url(http://morrie27.cafe24.com/theme/kluge/img/mobile/texture-2.jpg) no-repeat;
background-size: cover;
background-position: center center;
width: 100%;
height: 100vh;
font-family: 'Questrial', sans-serif;
}

#main-3{
background: url(http://morrie27.cafe24.com/theme/kluge/img/mobile/texture-3.jpg) no-repeat;
background-size: cover;
background-position: center center;
width: 100%;
height: 100vh;
font-family: 'Questrial', sans-serif;
}

#main-4{
background: url(http://morrie27.cafe24.com/theme/kluge/img/mobile/texture-4.jpg) no-repeat;
background-size: cover;
background-position: center center;
width: 100%;
height: 100vh;
font-family: 'Questrial', sans-serif;
}