에티테마

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

페이지 정보

작성자 소프트존 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 댓글 0건 작성일 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 23건 1 페이지
무료테마 메뉴얼 목록
번호 제목 글쓴이 날짜
공지 소프트존 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 04-25
공지 소프트존 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 03-22
공지 소프트존 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 02-27
20 소프트존 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 03-13
19 소프트존 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 03-25
18 소프트존 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 04-22
17 소프트존 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 08-22
16 소프트존 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 08-27
15 소프트존 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 12-09
14 소프트존 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 12-12
13 소프트존 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 12-17
12 소프트존 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 12-30
열람중 소프트존 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 02-28
10 소프트존 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 06-07
9 소프트존 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 11-24
8 소프트존 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 08-31
7 소프트존 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 12-20
6 소프트존 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 01-11
5 소프트존 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 01-20
4 소프트존 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 01-20
게시물 검색

카테고리

카테고리
 무료테마 자료실
무료테마 메뉴얼