2017-09-06 14 views
1

因此,我的網站圖像大小設置完美的桌面,但在移動模式下,他們不響應,即使我使用引導它們浮動顯示大小。如何設置不同的圖像大小當在移動模式?同樣的問題,谷歌地圖模板。我試圖設置媒體查詢,但它沒有奏效。如何在移動模式下設置不同的圖像尺寸

我的CSS:

@media(max-width: 400px) { 
    #himage{width:200px;} 
} 

這裏是我的代碼:

@extends ('master') 

@section('content') 

<div class="row" id="promotions"> 
    <div class="col-md-12" style="margin-bottom: 40px; "> 
     <h1 style="text-shadow: 0 2px 5px rgba(0,0,0,.9);color:white; font-weight: bold;">News feed</h1><br> 
     <h3 style="text-shadow: 0 2px 5px rgba(0,0,0,.9);color:white; font-weight: bold;">This month promotion:</h3><br> 
     <p class="homeintro ">Set of Rick & Morty Pop! figures for 30.00$ only!For details visit our <a class="shopp" href="{{ url('shop')}} " style="text-decoration: none;">Shop</a>. </p> <br> 
     <div class="col-md-6" id="himage" > 
      <img src="{{ asset('images/rc.jpg')}}" width="500" > 
     </div> 
     <div class="col-md-6" style="margin-bottom:15px" id="himage" > 
      <img src="{{ asset('images/mr.jpg')}}" width="500"> 
     </div> <br> <br><br> 
     <div class="col-md-6 col-sm-6" style="margin:10px;" id="himage"> 
      <p class="homeintro "> Rick & Morty posters for 15.00$ only! </p> <br> 
     </div> 
     <div class="col-md-6 col-sm-12" style="margin-bottom:20px;" id="himage" > 
      <img src="{{ asset('images/rmpos.jpg')}}" width="500" > 
     </div> 
     <div class="col-md-6 col-sm-12" style="margin-bottom:20px;" id="himage"> 
      <img src="{{ asset('images/rmpos2.jpg')}}" width="500"> 
     </div> <br><br> 
     <div class="col-md-6 col-sm-6" style="margin:10px;" id="himage"> 
      <h3 style="text-shadow: 0 2px 5px rgba(0,0,0,.9);color:white; font-weight: bold;"> Soon in our store. </h3> <br><br> 
      <p class="homeintro ">Spider-Man Homecoming action figures! </a>. </p> <br><br> 
     </div> 
     <div class="col-md-6 col-sm-12" style="margin-bottom:20px;" id="himage"> 
      <img src="{{ asset('images/sphome3.jpg')}}" width="500" > 
     </div> 
     <div class="col-md-6 col-sm-12" style="margin-bottom:20px;"id="himage" > 
      <img src="{{ asset('images/sphome.jpg')}}" width="500"> 
     </div> 
    </div> 
</div> 


@endsection 
+0

不能有具有相同ID的多於1個元素。 https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id – Jackowski

+0

你正在設置div的寬度不是圖像,不能有多個元素具有相同的ID – Bourne96

+0

@ Bourne96是的,謝謝你它如何谷歌模板地圖,它不是一個圖像,我如何修復大小? – Pioneer2017

回答