1
У меня возникли проблемы с Safari. Я ожидаю, что три столбца будут складываться в два столбца, поскольку экран становится меньше, но строка, похоже, остается того же размера.Сейфоризматичный конфликт по размеру окна
Вот код в вопросе
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 -->
<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/alliance.png" alt="" class="image-responsive wow zoom-in animated" style="visibility: visible;">
</div><!--END .partner-logo -->
<div class="partner-name">
<h4>Alliance Defending Freedom</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/drjames.png" alt="" class="image-responsive wow zoom-in animated" style="visibility: visible;">
</div><!--END .partner-logo -->
<div class="partner-name">
<h4>Family Talk with Dr. James Dobson</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/cgc.png" alt="" class="image-responsive wow zoom-in animated" style="visibility: visible;">
</div><!--END .partner-logo -->
<div class="partner-name">
<h4>Church of God in Christ</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> <!-- END .row -->
</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
}
Когда я закомментировать свойство коробчатых размеров в HTML элементе, кажется, я получу два столбцы сложены, но без соответствующих полей.
Эта страница отлично отображена на Chrome и FireFox. Какие изменения мне нужно сделать, чтобы отобразить это в Safari?
ADDED INFO ----
Я попытался изменить мин-ширина и максимальная ширина изгибаться, как предложено в других постах, но в то время как исправили проблему оберточную, то flexboxes остановился изменения размера.
Вот запросы средств массовой информации я использую:
@media (min-width: 300px) {
.container {
width: 280px;
margin: 0 auto;
}
#partners .partner-logo img {
margin-top: 30px;
width: 80%;
height:auto;
}
#partners {
text-align: center;
padding: 80px 0px 80px 5px;
}
.partner-container {
margin: 0 auto;
min-width: 310px;
float: right;
}
.feature-image .hero-layer h1 {
padding: 80px 0 80px 0;
}
#partners-intro .row {
padding: 30px 0;
position: relative;
}
#partners-intro h3 {
font-size: 1rem;
}
#partners .row {
width: 100%;
position: relative;
margin: 0 auto;
}
#partners .small-4 {
min-width: 98.5%;
}
}
@media (min-width: 320px) {
#partners .small-4 {
min-width: 98.5%;
}
}
@media (min-width: 480px) {
.container {
width: 400px;
margin: 0 auto;
}
#partners .partner-logo img {
margin-top: 30px;
width: 80%;
height:auto;
}
#partners {
padding: 80px 0px 80px 5px;
}
#partners-intro .row {
padding: 50px 0;
}
#partners-intro h3 {
font-size: 1.44478rem;
}
}
@media (min-width: 600px) {
#partners .small-4 {
min-width: 49.5%;
}
}
@media (min-width: 768px) {
.container {
width: 700px;
margin: 0 auto;
}
#partners .partner-logo img {
margin-top: 30px;
width: 80%;
height:auto;
}
#partners {
padding: 80px 0px 80px 5px;
}
.partner-box {
margin: 0;
}
.feature-image .hero-layer h1 {
padding: 100px 0 100px 0;
}
#partners-intro .row {
padding: 60px 0;
}
#partners-intro h3 {
font-size: 1.58478rem;
}
#partners .small-4 {
min-width: 49.5%;
}
}
@media (min-width: 992px) {
.container {
width: 895px;
margin: 0 auto;
}
#partners .small-4 {
min-width: 32.5%;
}
}
@media (min-width: 1200px) {
.container {
width: 1101px;
margin: 0 auto;
}
.feature-image .hero-layer h1 {
padding: 180px 0 180px 0;
}
#partners-intro .row {
padding: 80px 0;
}
#partners-intro h3 {
font-size: 1.68478rem;
}
}
Там отличный пост здесь о проблемах Flexbox в различных браузерах, проверка это и ссылка, найденная в нем для проблем Safari: http://stackoverflow.com/questions/35137085/flexbox-code-working-on-all-browsers-except-safari-why –
... которые заменяют мин. и макс. ширины с их эквивалентами flexbox: http://stackoverflow.com/questions/36636243/flex-items-not-stacking-properly-in-safari –
@ NathanielFlick означает, что это означает замену min и max в моих медиа-запросах? – Diah