에티테마

무료테마 에티테마 pc 와 모바일에서 부트스트랩 슬라이드 이미지 조정하기

페이지 정보

작성자 소프트존 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 댓글 0건 조회 1,923회 작성일 20-02-28 05:08

본문

안녕하세요 에티테마의 소프트존 입니다.
부트스트랩 사용시에 슬라이드가 pc 버전에서는 잘 보이고
mobile 에서는 짤려서 보이는 현상이 있습니다.

이를 해결하기 위해서는 아래 코드를 참고해주세요.
수정한곳은 테마폴더의 modern-business.css 입니다.
기존의 306 번째줄 보시면
 

/* carousel

------------------------------------*/

.carousel-item {

  /*height: 65vh;*/

  min-height: 250px;

  background: no-repeat center center scroll;

  -webkit-background-size: cover;

  -moz-background-size: cover;

  -o-background-size: cover;

  background-size: cover;

}
 

라고 되어 있는 부분이 있을겁니다.
pc 와 모바일 별도로 적용하기 위해서는 해당부분의 코드를 잘라내기 해서 삭제하고

233 번째줄 보시면

/* 미디어쿼리 모바일시 */

@media (max-width: 766px) {


/* carousel

------------------------------------*/

.carousel-item {

  /*height: 65vh;*/

  min-height: 100px;

  background: no-repeat center center scroll;

  -webkit-background-size: cover;

  -moz-background-size: cover;

  -o-background-size: cover;

  background-size: cover;

}


}


위와 같이 추가해 줍니다. 윗부분은 모바일에서의 적용부분 입니다.
그리고 171번째 줄보시면 아래와 같이 pc 적용 부분에 추가해줍니다.

 

@media (min-width: 768px) {

.navbar-nav > li > a {

/* (80px - line-height of 27px) / 2 = 26.5px */

padding-top: 0px;

padding-bottom: 0px;

line-height: 20px;

}


/* carousel

------------------------------------*/

.carousel-item {

  /*height: 65vh;*/

  min-height: 250px;

  background: no-repeat center center scroll;

  -webkit-background-size: cover;

  -moz-background-size: cover;

  -o-background-size: cover;

  background-size: cover;

}


}


pc 버전에서는 세로사이즈가 min-height: 250px 가 되고
모바일에서는 min-height: 100px 이 되게 수정해 주시면 됩니다.

이미지의 세로 크기에 따라서 height 값들을 조정해서 사용해주시면
정확한 이미지를 표현할 수 있겠습니다.
감사합니다.


 


  • 트위터로 보내기
  • 페이스북으로 보내기
  • 구글플러스로 보내기

댓글목록

등록된 댓글이 없습니다.

Total 25건 1 페이지
테마자료실 목록
번호 제목 글쓴이 조회 날짜
공지 소프트존 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 377 06-07
공지 소프트존 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 2960 11-25
공지 소프트존 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 6845 08-22
공지 소프트존 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 10334 03-22
공지 소프트존 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 5015 03-13
공지 소프트존 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 5876 03-13
공지 소프트존 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 5657 03-12
18 소프트존 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 306 06-13
열람중 소프트존 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 1924 02-28
16 소프트존 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 5007 12-12
15 소프트존 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 10737 03-25
14 소프트존 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 2716 12-30
13 소프트존 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 3323 12-17
12 소프트존 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 3228 12-12
11 소프트존 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 3804 12-09
게시물 검색

카테고리

카테고리
 공지사항
 스킨자료실
테마자료실
 테마메뉴얼
 구인구직
 제작의뢰

프리미엄

프리미엄

영화예고편

영화예고편

최근이미지리스트

최근이미지리스트