My website's image sizes are perfectly set for desktop, but they do not appear responsive in mobile mode. Despite using Bootstrap, the images overflow the display size. How can I set different image sizes for mobile mode? The same issue applies to the Google Maps template. I have tried using media queries, but it did not work.
Below is my CSS:
@media(max-width: 400px) {
#himage{width:200px;}
}
Here is my code:
@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's 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!</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