I've been encountering some responsiveness issues with Safari. Even though I expect the three columns to stack into two columns as the screen size decreases, the row remains the same size.
Here is the code snippet in question:
HTML:
<section id="partners" align="center">
<div class="row">
<div class="small-4">
<div class="partner-logo" style="visibility: visible; animation-name: d; -webkit-animation-name: d;">
<img src="wp-content/uploads/2016/12/storks.png" alt="" class="image-responsive wow zoom-in animated" style="visibility: visible;">
</div><!--END .partner-logo -->
<div class="partner-name">
<h4>Save The Storks</h4><p><a class="read-more" href="#">Read more <span class="icon icon-chevron-right"></span></a></p>
</div><!--END .partner-name-->
</div><!-- END .small-4 -->
<div class="small-4">
<div class="partner-logo wow slide-in" style="visibility: visible; animation-name: d; -webkit-animation-name: d;">
<img src="wp-content/uploads/2016/12/cor.png" alt="" class="image-responsive wow zoom-in animated" style="visibility: visible;">
</div><!--END .partner-logo -->
<div class="partner-name">
<h4>City of Refuge</h4><p><a class="read-more" href="#">Read more <span class="icon icon-chevron-right"></span></a></p>
</div><!--END .partner-name-->
</div><!-- END .small-4 -->
... (additional HTML code) ...
</section><!-- END #partners -->
CSS
.row {
max-width: 65.21739rem;
margin-left: auto;
margin-right: auto;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-flow: row wrap;
-ms-flex-flow: row wrap;
flex-flow: row wrap;
}
:after, :before {
box-sizing: inherit
}
html {
font-size: 115%;
box-sizing: border-box
}