모바일 및 태블릿 기기에 대한 미디어 쿼리를 사용하여 이미지 슬라이더의 크기를 조정하는 방법은 무엇입니까?

Question

이것은 WordPress의 사이트입니다. 여기에 사용 된 이미지 슬라이더는 노트북과 데스크톱에서 잘 작동하지만 모바일 및 태블릿에는 일부 디스플레이 문제가 있습니다 (첨부 된 스크린 샷 참조). http://www.potterandford.co.uk/property-details/?vebraid=26438819

슬라이더를 타겟팅하고 작은 화면 크기에 맞게 크기를 조정하려면 미디어 쿼리의 일부 형식이 필요하다고 생각합니다. 나는 CSS 코드의이 섹션을 살펴볼 필요가있다.

.flexslider { 
 
    position: relative; 
 
    zoom: 1; 
 
} 
 
.flexslider { 
 
    width: 100%; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.flexslider { 
 
    margin: 0 0 20px; 
 
    background: #fff; 
 
    border: 4px solid #fff; 
 
    position: relative; 
 
    -webkit-border-radius: 4px; 
 
    -moz-border-radius: 4px; 
 
    -o-border-radius: 4px; 
 
    border-radius: 4px; 
 
    -webkit-box-shadow: 0 1px 4px rgba(0,0,0,.2); 
 
    -moz-box-shadow: 0 1px 4px rgba(0,0,0,.2); 
 
    -o-box-shadow: 0 1px 4px rgba(0,0,0,.2); 
 
    box-shadow: 0 1px 4px rgba(0,0,0,.2); 
 
    zoom: 1; 
 
} 
 
.flexslider { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { 
 
    margin: 0; 
 
    padding: 0; 
 
    border: 0; 
 
    outline: 0; 
 
    font-size: 100%; 
 
    vertical-align: baseline; 
 
    background: transparent; 
 
}

내가 비록 확실하지 않다는이 올바른 접근 방식인가?

@media screen and (max-width: 480px) { 
 

 
.flexslider { 
 
width: 50%; 
 
    height: 50%; 
 
} 
 

 
}

는 도움을 줄 수 사람이 올바른 방향으로 날 지점인가?

Answer 1

당신은 당신을 위해 자동으로 그렇게 부트 스트랩 사용할 수 있습니다. 여기 당신이 부트 스트랩 사용 슬라이더의 많은 ... http://bootsnipp.com/tags/carousel