에티테마

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

페이지 정보

작성자 소프트존 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 댓글 0건 조회 1,477회 작성일 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 값들을 조정해서 사용해주시면
정확한 이미지를 표현할 수 있겠습니다.
감사합니다.




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

댓글목록

등록된 댓글이 없습니다.

카테고리

카테고리
 질문답변
팁게시판
 영카트팁
 그누M팁
 자료실

프리미엄

프리미엄

영화예고편

영화예고편

유튜브채널

유튜브최근리스트

최근이미지리스트

최근이미지리스트