Boostrap image not responsive in safari - html

Question

I realized my website is not working on safari (desktop and mobile). For some reason the images are not responsive. I used a Bootstrap theme, the website is simple. Please help!
website: www.scanek.com
HTML:
<section id="portfolio" class="pfblock">
<div class="container">
<div class="row">
<div class="col-sm-6 col-sm-offset-3">
<div class="pfblock-header wow fadeInUp">
<h2 class="pfblock-title">Categories</h2>
<div class="pfblock-subtitle">
</div>
</div>
</div>
</div><!-- .row -->
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
<div class="grid wow zoomIn">
<a href="categories/kitchen/index.html">
<figure class="effect-bubba">
<img src="assets/images/kitchens.jpg" alt="img01" class="img-responsive" />
<figcaption>
<h2> <span>Kitchens</span></h2>
<p></p>
</figcaption>
</figure>
</a>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
<div class="grid wow zoomIn">
<a href="categories/bathroom//bathroom1/index.html">
<figure class="effect-bubba">
<img src="assets/images/bathrooms.jpg" alt="img01"/>
<figcaption>
<h2> <span>Bathrooms</span></h2>
<p></p>
</figcaption>
</figure>
</a>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
<div class="grid wow zoomIn">
<a href="categories/fixtures/index.html">
<figure class="effect-bubba">
<img src="assets/images/fixtures.jpg" alt="img01"/>
<figcaption>
<h2>House<span> Fixtures</span></h2>
<p></p>
</figcaption>
</figure>
</a>
</div>
</div>
</div>
</div><!-- .container -->
</section>
CSS:
img {
max-width: 100%;
width: 100%;
height: auto;
}
.grid figure img {
position: relative;
display: block;
min-height: 100%;
max-width: 100%;
opacity: 0.8;
}
figure.effect-bubba img {
opacity: 0.75;
-webkit-transition: opacity 0.35s;
transition: opacity 0.35s;
}

Answer 1

Your css syntaks on link that you provide to us is not right, for the start,
you have:
img {
max-width: 100% width :100% height: auto;
}
try with :
img {
max-width: 100%;
width :100%;
height: auto;
}
after yo fix this issues, then if problem is still there we can try to help you..

Answer 2

In addiion to the CSS typo on img width(should be width: 100%;), you had .img-reponsive only on one image set.
Set .img-responsive on all images.
Check resizing on following fiddle: https://jsfiddle.net/Syden/5mfvj9v2/20/
Snippet below:
img {
max-width: 100%;
width: 100%;
height: auto;
}
.grid figure img {
position: relative;
display: block;
min-height: 100%;
max-width: 100%;
opacity: 0.8;
}
figure.effect-bubba img {
opacity: 0.75;
-webkit-transition: opacity 0.35s;
transition: opacity 0.35s;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<section id="portfolio" class="pfblock">
<div class="container">
<div class="row">
<div class="col-sm-6 col-sm-offset-3">
<div class="pfblock-header wow fadeInUp">
<h2 class="pfblock-title">Categories</h2>
<div class="pfblock-subtitle">
</div>
</div>
</div>
</div>
<!-- .row -->
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
<div class="grid wow zoomIn">
<a href="categories/kitchen/index.html">
<figure class="effect-bubba">
<img src="https://placehold.it/200x500" alt="img01" class="img-responsive" />
<figcaption>
<h2> <span>Kitchens</span></h2>
<p></p>
</figcaption>
</figure>
</a>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
<div class="grid wow zoomIn">
<a href="categories/bathroom//bathroom1/index.html">
<figure class="effect-bubba">
<img src="https://placehold.it/200x500" alt="img01" class="img-responsive" />
<figcaption>
<h2> <span>Bathrooms</span></h2>
<p></p>
</figcaption>
</figure>
</a>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
<div class="grid wow zoomIn">
<a href="categories/fixtures/index.html">
<figure class="effect-bubba">
<img src="https://placehold.it/200x500" alt="img01" class="img-responsive" />
<figcaption>
<h2>House<span> Fixtures</span></h2>
<p></p>
</figcaption>
</figure>
</a>
</div>
</div>
</div>
</div>
<!-- .container -->
</section>