TransWikia.com

Owl Carouselを使ってスライドを導入していたのですが、サーチコンソールからの忠告でコンテンツ幅が画面サイズを超えていると出てしまいました。

スタック・オーバーフロー Asked on August 22, 2020

Owl Carouselを使ってスライドをサイトに導入していたのですが、今回、モバイルフレンドリー対応での「コンテンツ幅が画面サイズを超えている」という忠告を受けました。
他の部分ではないかといろいろ検証した結果、Owl Carouseの部分のdivを削除すると、モバイルフレンドリーの結果はクリアするので、やはりスライドの部分が問題だという結論に至りました。
いろいろなサイトを調べてみたのですが、Owl Carouselはレスポンシブ対応しているなどの意見しかなく、エラーが出ている事例はあまり見受けられませんでした。
何かいい解決方法はありますか?

<div class="container-fluid mb15">
 <div class="row">
    <div class="owl-carousel">
        <?php
        $rows = get_field('***', ***);
        if ($rows) {
            foreach ($rows as $row) { ?>
                <div>
                <?php if (!empty($row['url'])) : ?>
                    <a href="<?php echo $row['url']; ?>">
                        <?php echo wp_get_attachment_image($row['image']['ID'], 'full', $row['image']['alt']); ?>
                    </a>
                <?php else : ?>
                        <?php echo wp_get_attachment_image($row['image']['ID'], 'full', $row['image']['alt']); ?>
                <?php endif; ?>
            </div>
        <?php
            }
        }            
        ?>
    </div>
</div>

この様にしているのですが、スライドはコンテンツ幅の画面内に対応はできないのですかね。。?

One Answer

同じ現象で悩んでいましたが、

<div class="owl-carousel" style="overflow:hidden;">

であっけなく解決しましたぁぁ。

Answered by yama on August 22, 2020

Add your own answers!

Ask a Question

Get help from others!

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP