webサイトのInstagramの埋め込みが表示されなくなってしまったので、
Instagram Graph APIで埋め込み直しました。
PCで4枚×3段 で表示させるようにしたのですが、
safariのみ1段目2枚 2段~4段目3枚 5段目1枚で表示されます。
ソースコードは下記です。
[HTML]
<div class="wrapper insta">
<h3 id="insta_ttl"><i class="fab fa-instagram fa-2x" style="margin-right: 30px; vertical-align: middle;"></i><img src="<?php echo get_template_directory_uri(); ?>/images/top/instagram.png" width="150px" style="transform: translateY(7px);"></h3>
<ul id="gallery" class="gallery">
</ul>
</div>
[CSS]
/** TOPインスタ**/
.insta .gallery img{
width: 98%;
height: auto;
text-align: center;
}
.insta .gallery {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin: 0;
padding: 0;
}
.insta .gallery-item {
-webkit-box-flex: 1;
-ms-flex: 1 1 25%;
flex: 1 1 25%;
width: 25%!important;
}
最終的に width: 25%!important; を入れてみましたがダメでした。。。
なぜだか教えていただけないでしょうか?
safari バージョン追記 13.0.1
あなたの回答
tips
プレビュー