css 문의 채택완료
http://dreams.phps.kr/
메인 슬라이딩 이미지 아래 기본은 3개의 배너로 되어 있는데요
4개로 했더니 한줄 내려가네요..한줄로 모두 보이게 하려면 css를 어떻게 수정해야 할까요??
답변 8개
<div class="container">
이 태그 부분( 아까 설명 드린 부분 부모 태그 입니다.) 변경 하셔야 해요
bootstrap.min.css 소스중ㅇ
@media (min-width: 1200px) .contaner{width:1170px}
-->
@media (min-width: 1200px) .contaner{width:1560px}
으로 변경하시면 되요
그리고 아까
col-sm-4 클래스도
col-sm-3 로 변경하시구요
그런데 container 이 클래스명이 다른곳에 같은 명으로 쓰는 경우가 아마 잇어서 오류날텐데 클래스명을 따로 변경하셔서 사용하는게 좋을듯해요
container -> container2 이런식으로요
답변에 대한 댓글 1개
댓글을 작성하려면 로그인이 필요합니다.
댓글을 작성하려면 로그인이 필요합니다.
답변에 대한 댓글 1개
댓글을 작성하려면 로그인이 필요합니다.
아 부트스트랩이시네요
보니깐
<!--{@ contents}-->
<div class="col-sm-4">
<div class="section-item">
<div class="section-image">
<!--{? .href_1}-->
<a href="{.href_1}" target="{.target_1}">
<!--{/}-->
<!--{@ image}-->
<img src="{.src_1}">
<!--{/}-->
<!--{? .href_1}-->
</a>
<!--{/}-->
</div>
<div class="section-content">
<!--{? .ci_title}-->
<h4>{.ci_title}</h4>
<!--{/}-->
<!--{? .ci_text}-->
<p>{.ci_text}</p>
<!--{/}-->
<!--{? .href_1}-->
<div class="btn-more"><a href="{.href_1}" target="{.target_1}">자세히 보기</a></div>
<!--{/}-->
</div>
</div>
</div>
<!--{:}-->
그 배너 영역에
<div class="col-sm-4"> 이렇게 되어있는걸 클래스명을 변경하세요
<div class="col-sm-4">
----->>
<div class="col-sm-3">
col-sm-3 클래스로 변경하시면 됩니다
답변에 대한 댓글 1개
그렇게 하면 배너의 사이즈가 바뀌지요!!
사이즈를 유지하면서 숫자를 한줄로 하는 방법이 없을까요? ㅜㅜ
댓글을 작성하려면 로그인이 필요합니다.
댓글을 작성하려면 로그인이 필요합니다.
댓글을 작성하려면 로그인이 필요합니다.
해당파일의 소스에요
<?php if (!defined('_GNUBOARD_')) exit; ?>
<style>
/* 섹션 타이틀 */
.ebcontents-sect02 {margin-bottom:60px}
.ebcontents-sect02 .section-title {max-width:1280px;margin:0 auto;padding:60px 0 40px}
.ebcontents-sect02 .section-title:after {content:"";display:block;clear:both}
.ebcontents-sect02 .section-title h3 {float:left;width:40%;margin:0;font-size:40px;line-height:45px;color:#1D4252;font-weight:200}
.ebcontents-sect02 .section-title h3 strong {display:block}
.ebcontents-sect02 .section-title p {float:left;width:60%;margin:0;font-size:18px;line-height:30px;color:#707070;padding:0 30px;border-left:1px solid #ddd;border-right:1px solid #ddd}
/* 섹션 아이템 */
.ebcontents-sect02 .section-item {border-top:5px solid #4fb0df}
.ebcontents-sect02 .section-item a {display:block}
.ebcontents-sect02 .section-item img {max-width:100%;height:auto}
.ebcontents-sect02 .section-content {margin-top:20px}
.ebcontents-sect02 .section-content h4 {font-size:18px;font-weight:bold}
.ebcontents-sect02 .section-content p {margin-bottom:15px;color:#707070}
/* 버튼 */
.ebcontents-sect02 .section-content .btn-more a {display:inline-block;padding:5px 20px;border:2px solid #ccc;color:#707070;-webkit-transition:all 0.3s ease-in-out;-moz-transition:all 0.3s ease-in-out;transition:all 0.3s ease-in-out}
.ebcontents-sect02 .section-content .btn-more a:hover {background:#4fb0df;border-color:#4fb0df;color:#fff}
@media (max-width:1199px){
.ebcontents-sect02 .section-title {max-width:100%}
.ebcontents-sect02 .section-title h3 {font-size:35px}
.ebcontents-sect02 .section-title p {font-size:16px}
}
@media (max-width:991px){
.ebcontents-sect02 .section-title h3, .ebcontents-sect02 .section-title p {float:none;width:100%}
.ebcontents-sect02 .section-title h3 {padding-bottom:10px;margin-bottom:10px;font-size:24px;line-height:34px;border-bottom:1px solid #ddd}
.ebcontents-sect02 .section-title h3 span {display:inline}
.ebcontents-sect02 .section-title p {padding:0;font-size:14px;line-height:24px;border:0}
}
@media (max-width:767px){
.ebcontents-sect02 .col-sm-4 {margin-bottom:30px}
.ebcontents-sect02 .col-sm-4:last-child {margin-bottom:0}
}
.ebcontents {position:relative}
.ebcontents-032-section01-adm-btn {position:absolute;bottom:0;left:0;width:100%;text-align:center;z-index:1}
</style>
<div class="ebcontents ebcontents-sect02">
<div class="container">
<div class="section-title">
<h3>{ecinfo.ec_subject}</h3>
<p>{ecinfo.ec_text}</p>
</div>
<div class="row">
<!--{@ contents}-->
<div class="col-sm-4">
<div class="section-item">
<div class="section-image">
<!--{? .href_1}-->
<a href="{.href_1}" target="{.target_1}">
<!--{/}-->
<!--{@ image}-->
<img src="{.src_1}">
<!--{/}-->
<!--{? .href_1}-->
</a>
<!--{/}-->
</div>
<div class="section-content">
<!--{? .ci_title}-->
<h4>{.ci_title}</h4>
<!--{/}-->
<!--{? .ci_text}-->
<p>{.ci_text}</p>
<!--{/}-->
<!--{? .href_1}-->
<div class="btn-more"><a href="{.href_1}" target="{.target_1}">자세히 보기</a></div>
<!--{/}-->
</div>
</div>
</div>
<!--{:}-->
<div class="col-sm-4">
<div class="section-item">
<div class="section-image">
<a href="#">
<img src="./image/contents_01.jpg">
</a>
</div>
<div class="section-content">
<h4>빠르고 편리한 교통 환경</h4>
<p>주거 공간에 품격을 높이고 살기 좋은 환경을 원하는 당신께 최상의 품질을 약속하는 이윰이 그 방법을 제시해 드립니다.</p>
<div class="btn-more"><a href="">자세히 보기</a></div>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="section-item">
<div class="section-image">
<a href="#">
<img src="./image/contents_02.jpg">
</a>
</div>
<div class="section-content">
<h4>쇼핑몰과 편의시설</h4>
<p>주거 공간에 품격을 높이고 살기 좋은 환경을 원하는 당신께 최상의 품질을 약속하는 이윰이 그 방법을 제시해 드립니다.</p>
<div class="btn-more"><a href="">자세히 보기</a></div>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="section-item">
<div class="section-image">
<a href="#">
<img src="./image/contents_03.jpg">
</a>
</div>
<div class="section-content">
<h4>대표 랜드마크 조성</h4>
<p>주거 공간에 품격을 높이고 살기 좋은 환경을 원하는 당신께 최상의 품질을 약속하는 이윰이 그 방법을 제시해 드립니다.</p>
<div class="btn-more"><a href="">자세히 보기</a></div>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="section-item">
<div class="section-image">
<a href="#">
<img src="./image/contents_03.jpg">
</a>
</div>
<div class="section-content">
<h4>대표 랜드마크 조성</h4>
<p>주거 공간에 품격을 높이고 살기 좋은 환경을 원하는 당신께 최상의 품질을 약속하는 이윰이 그 방법을 제시해 드립니다.</p>
<div class="btn-more"><a href="">자세히 보기</a></div>
</div>
</div>
</div>
<!--{/}-->
</div>
</div>
<!--{? is_admin == 'super'}-->
<div class="ebcontents-032-section01-adm-btn text-center hidden-xs">
<a href="{C.EYOOM_ADMIN_URL}/?dir=theme&pid=ebcontents_form&thema={theme}&ec_code={code}&w=u" target="_blank" class="btn-e btn-e-dark"><i class="fa fa-cog"></i> EB컨텐츠 설정하기</a>
<button type="button" class="btn-e btn-e-dark popovers" data-container="body" data-toggle="popover" data-placement="top" data-html="true" data-content="
<span class='font-size-11'>
<strong class='color-indigo'>좌측 [EB컨텐츠 설정하기 버튼] 클릭 후 아래 설명 참고</strong><br>
<div class='margin-hr-5'></div>
<span class='color-indigo'>[설정정보]</span><br>
1. 컨텐츠 마스터 제목 : Salubrious Primium...<br>
2. 스킨선택 : busi0032_sect02<br>
3. 컨텐츠 마스터 설명글 : 주거 공간에 품격을..<br>
4. 컨텐츠 아이템에서 사용할 링크수 : 1개<br>
5. 컨텐츠 아이템에서 사용할 이미지수 : 1개<br>
<span class='color-indigo'>[EB 컨텐츠 - 아이템 관리]</span><br>
1. EB컨텐츠 아이템 추가 클릭<br>
2. 대표 타이틀 입력<br>
3. 섦명문구틀 입력<br>
4. 연결주소 [링크] #1 입력 (자세히 보기 버튼 출력)<br>
5. 이미지 #1<br>
<div class='margin-hr-5'></div>
- 이미지 비율 900x900 픽셀 이미지 사용<br>
- EB컨텐츠 아이템 3개에 맞춰 디자인
</span>
"><i class="fa fa-question-circle"></i></button>
</div>
<!--{/}-->
</div>
댓글을 작성하려면 로그인이 필요합니다.
설정되어있는 width 값 늘려야 할것같은데 소스를 봐야 알겟같네요; 그 부분 실행하는 스크립트부분이요
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인