モバイルデバイスとタブレットデバイスのメディアクエリを使用してイメージスライダのサイズを変更するにはどうすればよいですか？

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