css - モバイルでの画像の表示を改善するための css の変更

Question

わかりましたので、ここに私の問題があります-私はブートストラップレスポンシブを使用しており、ユーザーが小さなタブレットまたは電話を使用するまではすべて素晴らしいです-それらの画像は小さすぎます-214ピクセルの.box cssに従います-画像でいっぱいにしたいですユーザーが電話で表示したときの画面スペースが、デスクトップでは同じように見えます..何かアイデアはありますか?

私のCSSファイル:

$navbarBackgroundHighlight: white;
$navbarBackground: white;
$btnPrimaryBackground: green;

@import 'bootstrap';
body{
    padding-top: 60px;
}

body{
    padding-left: 60px;
}




@import 'bootstrap-responsive';





.footer{
    margin-top: 50px;
    color: $grayLight;
    a{
        color: $gray;
    }
}

/* Required for jQuery Masonry */

.box {
    margin: 5px;
    padding: 5px;
    font-size: 11px;
    line-height: 1.4em;
    float: left;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    box-shadow: 1px 1px 10px #444;
    width: 214px;

}

.box img {
    width: 100%;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

.description {
    margin: 10px 0 5px;
}


#tag_cloud {
  width: auto;
  text-align: center;
  line-height: 1.6em;
  .s { font-size: 0.9em; color: #3B52A3 ;font-weight: italic; font-family: inherit }
  .ss { font-size: 1.2em; color: #118C4E ;font-weight: bold; font-family: inherit }
  .m { font-size: 1.8em; color: #005A31; font-weight: italic; font-family: inherit }
  .mm { font-size: 2.4em; color: #CE3927; font-weight: bold; font-family: inherit }
  .l { font-size: 3.0em; color: #B71427; font-weight: bold; font-family: inherit }
  .ll { font-size: 3.7em; color: #AECC23; font-weight: bold; font-family: inherit }

}

.hero-unit {
  background-image:url('http://s3.amazonaws.com/barnpix/pins/images/000/000/087/original/DSC00071.JPG?1375385330');
  background-size:cover;
  color: white;
  a:hover {
     color: #ABC147;
     text-decoration: underline;
}
  height:auto;
  opacity: 1.0;
}

そして私の見解：

<%= render 'pages/home' %>



<div id="pins">
  <%= render @pins %>
</div>

<%= will_paginate @pins %>