HTMLとCSSで作成したWEBサイトをWordpressに載せ替える作業をしています。(初心者です)
ですが、HTMLの時には効いていたDisplay:flex(横並び)が効かなくなり、困っています。
<div id="our-business" class="inner"> <!--事業内容--> <div class="biz-box col-6"> <?php $cons= CFS()->get('business'); foreach($cons as $con): ?> <h3><?php echo $con['business_title']; ?></h3> <img class="photoframe" src="<?php echo $con['business_img']; ?>" alt="事業内容"> <p> <?php echo $con['business_content']; ?> </p> <?php endforeach; ?> </div> </div>
CSSはこちら
/* 効かないdisplay: flex */ #our-business { display: -webkit-flex; /* safari用 */ display: flex; -webkit-flex-wrap: wrap; /* safari用 */ flex-wrap: wrap; } /* 事業内容のボックス */ .biz-box { padding: 0 25px; margin-bottom: 40px; } /* 事業内容の見出し */ .biz-box h3 { text-align: center; } /* 事業内容の画像 */ .biz-box img { margin-bottom: 25px; width: 100%; }
※今回、このページにはCustom Field Suiteを適用しています。
###試したこと:
①念のため、#our-businessの部分をWordpressの追加CSSのほうに書いてみましたが、ダメでした。
②検証ルールで確認したところ、display: flex;は普通に記載され、特に取り消し線など入っていません。ですが、実際は縦並びです。
載せ替え前のHTMLだけの時のものを検証ツールで確認するとdisplay: flexは効いていて横並びになり、display: blockに変えると縦になります。
Custom Field Suiteが問題なのでしょうか。。
どなたか似たようなご経験をなさった方など、おられませんでしょうか。。。
ヒントだけでも見つかると本当に助かります。
どうかよろしくお願いいたします。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/05/15 07:50
2019/05/15 07:55
2019/05/17 06:57
2019/05/17 07:00