1

So my site image sizes set perfectly for desktop but when in mobile mode they not responsive even though I use bootstrap they over float the display size .How can I set a different image size when in mobile mode? Same question in regards google maps template.I tried to set media queries but it did not work.

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 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
Improve this question
7
  • You can't have more than 1 element with the same ID. developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id
    – Hedegare
    Commented Sep 6, 2017 at 16:33
  • you are setting width of the div not image and can't have multiple elements with same ID
    – Bourne96
    Commented Sep 6, 2017 at 16:37
  • @Bourne96 yes thanks you it worked.How about google template map, its not an image ,how can I fix the size?
    – Pioneer2017
    Commented Sep 6, 2017 at 16:46
  • Are we talking about iframe, just target iframe and change it's width and height
    – Bourne96
    Commented Sep 6, 2017 at 16:47
  • Don't use same id for all images and set the max-width:100% for image so the images will set in mobile view.
    – LKG
    Commented Sep 6, 2017 at 16:51

1 Answer 1

Reset to default
1

In Bootstrap 4, you should add the img-fluid class to any images you want to resize responsively.

(In Bootstrap 3, use img-responsive instead.)

Improve this answer
0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.