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

안녕하세요 에티테마의 소프트존 입니다.
부트스트랩 사용시에 슬라이드가 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 값들을 조정해서 사용해주시면
정확한 이미지를 표현할 수 있겠습니다.
감사합니다.