모바일 인덱스 질문입니다.
본문
모바일 인덱스를 보면
저렇게 3가지가 기본으로 나옵니다.
이것을 4가지 5가지로 나오게 할 수도 있을까요?
박스 크기는 일정하게 지정하고요.
선택되어 중앙으로 오느 메뉴가 조금 더 큰거 같아서요.
답변 1
각 박스의 크기를 퍼센트로 동일하게 주고(4개면 25%, 5개면 20%)
box-sizing:border-box;
를 적용하시면 될 것 같습니다.
세모네모님 감사합니다.
죄송하지만 조금만 더 자세하게 알려주시면 감사하겠습니다.
파일 위치며 box-sizing:border-box;를 어찌 삽입 해야 할지 전혀 모르겠습니다.
캡쳐 이미지만으로는 파일위치 확인이 안됩니다.
답변 감사합니다.
모바일 인덱스 화면입니다.
<code>
<script src="<?php echo G5_JS_URL; ?>/swipe.js"></script>
<script src="<?php echo G5_JS_URL; ?>/shop.mobile.main.js"></script>
<div id="sidx" class="swipe">
<div id="sidx_slide" class="swipe-wrap">
<?php if($default['de_mobile_type1_list_use']) { ?>
<div class="sct_wrap">
<header>
<h2>베스트상품</h2>
<p class="sct_wrap_hdesc"><?php echo $config['cf_title']; ?> 베스트상품 모음</p>
</header>
<?php
$list = new item_list();
$list->set_mobile(true);
$list->set_type(1);
$list->set_view('it_id', false);
$list->set_view('it_name', true);
$list->set_view('it_cust_price', true);
$list->set_view('it_price', true);
$list->set_view('it_icon', true);
$list->set_view('sns', true);
echo $list->run();
?>
<div class="sct_more"><a href="<?php echo G5_SHOP_URL; ?>/listtype.php?type=1">더 보기</a></div>
</div>
<?php } ?>
<?php if($default['de_mobile_type2_list_use']) { ?>
<div class="sct_wrap">
<header>
<h2>추천상품</h2>
<p class="sct_wrap_hdesc"><?php echo $config['cf_title']; ?> 추천상품 모음</p>
</header>
<?php
$list = new item_list();
$list->set_mobile(true);
$list->set_type(2);
$list->set_view('it_id', false);
$list->set_view('it_name', true);
$list->set_view('it_cust_price', true);
$list->set_view('it_price', true);
$list->set_view('it_icon', true);
$list->set_view('sns', true);
echo $list->run();
?>
<div class="sct_more"><a href="<?php echo G5_SHOP_URL; ?>/listtype.php?type=2">더 보기</a></div>
</div>
<?php } ?>
<?php if($default['de_mobile_type3_list_use']) { ?>
<div class="sct_wrap">
<header>
<h2>최신상품</h2>
<p class="sct_wrap_hdesc"><?php echo $config['cf_title']; ?> 최신상품 모음</p>
</header>
<?php
$list = new item_list();
$list->set_mobile(true);
$list->set_type(3);
$list->set_view('it_id', false);
$list->set_view('it_name', true);
$list->set_view('it_cust_price', true);
$list->set_view('it_price', true);
$list->set_view('it_icon', true);
$list->set_view('sns', true);
echo $list->run();
?>
<div class="sct_more"><a href="<?php echo G5_SHOP_URL; ?>/listtype.php?type=3">더 보기</a></div>
</div>
<?php } ?>
<?php if($default['de_mobile_type3_list_use']) { ?>
<div class="sct_wrap">
<header>
<h2>선물세트</h2>
<p class="sct_wrap_hdesc"><?php echo $config['cf_title']; ?> 선물세트 모음</p>
</header>
<?php
$list = new item_list();
$list->set_category('40', 1);
$list->set_list_mod(3);
$list->set_list_row(1);
$list->set_img_size(230, 230);
$list->set_list_skin(G5_MSHOP_SKIN_PATH.'/list.10.skin.php');
$list->set_view('it_img', true);
//$list->set_view('it_id', true);
$list->set_view('it_name', true);
//$list->set_view('it_basic', true);
$list->set_view('it_cust_price', true);
$list->set_view('it_price', true);
$list->set_view('it_icon', true);
$list->set_view('sns', true);
$list->set_mobile(true);
echo $list->run();
?>
<div class="sct_more"><a href="<?php echo G5_SHOP_URL; ?>/list.php?ca_id=40">더 보기</a></div>
</div>
<?php } ?>
<?php if($default['de_mobile_type4_list_use']) { ?>
<div class="sct_wrap">
<header>
<h2>인기상품</h2>
<p class="sct_wrap_hdesc"><?php echo $config['cf_title']; ?> 인기상품 모음</p>
</header>
<?php
$list = new item_list();
$list->set_mobile(true);
$list->set_type(4);
$list->set_view('it_id', false);
$list->set_view('it_name', true);
$list->set_view('it_cust_price', true);
$list->set_view('it_price', true);
$list->set_view('it_icon', true);
$list->set_view('sns', true);
echo $list->run();
?>
<div class="sct_more"><a href="<?php echo G5_SHOP_URL; ?>/listtype.php?type=4">더 보기</a></div>
</div>
<?php } ?>
</code>
<code>
<?php if($default['de_mobile_type5_list_use']) { ?>
<div class="sct_wrap">
<header>
<h2>이벤트</h2>
<p class="sct_wrap_hdesc"><?php echo $config['cf_title']; ?> 이벤트 모음</p>
</header>
<?php
$list = new item_list();
$list->set_mobile(true);
$list->set_type(5);
$list->set_view('it_id', false);
$list->set_view('it_name', true);
$list->set_view('it_cust_price', true);
$list->set_view('it_price', true);
$list->set_view('it_icon', true);
$list->set_view('sns', true);
echo $list->run();
?>
<div class="sct_more"><a href="<?php echo G5_SHOP_URL; ?>/listtype.php?type=5">더 보기</a></div>
</div>
<?php } ?>
<?php
$hsql = " select ev_id, ev_subject, ev_subject_strong from {$g5['g5_shop_event_table']} where ev_use = '1' order by ev_id desc ";
$hresult = sql_query($hsql);
if(mysql_num_rows($hresult)) {
?>
<div class="sct_wrap">
<header>
<h2>이벤트</h2>
<p class="sct_wrap_hdesc"><?php echo $config['cf_title']; ?> 이벤트 모음</p>
</header>
<?php include_once(G5_MSHOP_SKIN_PATH.'/main.event.skin.php'); ?>
</div>
<?php
}
?>
</div>
</div>
<script>
$(function() {
$("#sidx").swipeSlide({
slides: ".swipe-wrap > div",
header: "header h2",
tabWrap: "slide_tab",
tabActive: "tab_active",
tabOffset: 10,
startSlide: 0,
auto: 0
});
});
</script>
<?php
include_once(G5_MSHOP_PATH.'/_tail.php');
?>
</code>
확실하지는 않으나
/mobile/head.php
/css/mobile.css
를 확인하여 적용해보세요.
감사합니다.
/css/mobile_shop.css 출력부분이 있는데요.
마지막으로 도움 한번 더 요청해도 될까요?
/* 인덱스 이미지 출력 */
#sidx {padding:0}
/* 인덱스 상품 */
#slide_tab {position:relative;margin:-10px 0 30px;padding:0;width:100%;height:40px;background:#701940;list-style:none;overflow:hidden}
#slide_tab li {position:absolute;top:0;text-align:center}
#slide_tab button {margin:0;padding:0 15px;height:40px;border:0;background:#8c2353;color:#fff}
#slide_tab .tab_active button {background:transparent;font-weight:bold}
#sidx_slide {position:relative;top:0;left:0;width:100%;overflow:hidden}
.sidx_slide {position:absolute;top:0;left:0;width:100%}
.swipe {
overflow: hidden;
visibility: hidden;
position: relative;
}
.swipe-wrap {
overflow: hidden;
position: relative;
}
.swipe-wrap > div {
float:left;
width:100%;
position: relative;
}
#slide_tab li {position:absolute;top:0;text-align:center;width:33.33%}
#slide_tab button {margin:0;padding:0 15px;height:40px;border:0;background:#8c2353;color:#fff;width:100%}
위와 같이 바꿔보시죠.
(원본 백업하시구요.)
답변 감사합니다.
아무 변화가 없네요.
답변 정말 감사합니다.
/* 인덱스 상품 */
#slide-btn {margin:-10px 0 30px;padding:0;width:100%;height:40px;background:#701940;list-style:none;overflow:hidden}
#slide-btn button {margin:0;padding:0 15px;height:40px;border:0;background:#8c2353;color:#fff;width:100%}
#slide-btn .tab_active button {background:transparent;font-weight:bold}
#slide-btn li {float:left;width:24.2%}
@media all and (max-width:100%) {
.slide-btn span {display:none}
}
.swipe {
overflow: hidden;
visibility: hidden;
position: relative;
}
.swipe-wrap {
overflow: hidden;
position: relative;
}
.swipe-wrap > div {
float:left;
width:100%;
position: relative;
}
이렇게 처리하니 잘 됩니다.
감사합니다.
