はじめまして!
ワードプレスでサイト運営をしております。
サイトのトップページでは投稿記事の一覧が表示されるのですが
一部の記事がIphoneで表示されません。
例えば、パソコンでは10記事すべて表示されますがIPHONEだと4つ目と5つ目の記事が表示されません。
全部で8記事表示されます。
HTML、CSSの問題でしょうか?
トップページの記事一覧のキャプチャを撮りましたのでアップさせていただきます。
■パソコンでトップページを表示
■Iphoneでトップページを表示(4つ目と5つ目の記事が表示されない)
■トップページの一部ソース
lang
1 2 3 4<div id="main"> 5 <div class="main-inner"> 6 7<div id="popular_post_content" class="front-loop"> 8 9<h2><i class="fa fa-clock-o"></i> 最近の投稿</h2> 10<div class="wrap"> 11<div class="front-loop-cont"> 12 13 14<!-- 1記事目 --> 15<article id="post-190" class="popular_post_box recent-1 省略> 16 </article> 17 18 19<!-- 2記事目 --> 20<article id="post-139" class="popular_post_box recent-2 省略> 21 </article> 22 23 24<!-- 3記事目 --> 25<article id="post-161" class="popular_post_box recent-3 省略> 26 27 </article> 28 29 30<!-- 4記事目 --> 31 <article id="post-349" class="popular_post_box recent-4 post-349 post type-post status-publish format-standard has-post-thumbnail hentry category-3lht"> 32 <a href="http://www.tralabo.com/hp/2016/04/04/apppp/" class="wrap-a"> <div class="post-thumbnail"> 33 <img width="280" height="158" src="http://www.tralabo.com/hp/wp-content/uploads/2016/04/4-300x169.png" class="attachment-300x158 size-300x158 wp-post-image" alt="4" srcset="http://www.tralabo.com/hp/wp-content/uploads/2016/04/4-300x169.png 300w, http://www.tralabo.com/hp/wp-content/uploads/2016/04/4-768x432.png 768w, http://www.tralabo.com/hp/wp-content/uploads/2016/04/4-304x171.png 304w, http://www.tralabo.com/hp/wp-content/uploads/2016/04/4-281x158.png 281w, http://www.tralabo.com/hp/wp-content/uploads/2016/04/4.png 960w" sizes="(max-width: 280px) 100vw, 280px" /> </div> 34 <p class="p_category">《〜初級編〜》</p> 35 <h3>4 アプリの使い方</h3> 36 <p class="p_date"><span class="date-y">2016</span><span class="date-mj">04/4</span></p></a> 37 </article> 38 39 40<!-- 5記事目 --> 41<article id="post-278" class="popular_post_box recent-5 post-278 post type-post status-publish format-standard has-post-thumbnail hentry category-3lht"> 42 <a href="http://www.tralabo.com/hp/2016/04/05/unyou/" class="wrap-a"> <div class="post-thumbnail"> 43 <img width="280" height="158" src="http://www.tralabo.com/hp/wp-content/uploads/2016/04/5-300x169.png" class="attachment-300x158 size-300x158 wp-post-image" alt="5" srcset="http://www.tralabo.com/hp/wp-content/uploads/2016/04/5-300x169.png 300w, http://www.tralabo.com/hp/wp-content/uploads/2016/04/5-768x432.png 768w, http://www.tralabo.com/hp/wp-content/uploads/2016/04/5-304x171.png 304w, http://www.tralabo.com/hp/wp-content/uploads/2016/04/5-281x158.png 281w, http://www.tralabo.com/hp/wp-content/uploads/2016/04/5.png 960w" sizes="(max-width: 280px) 100vw, 280px" /> </div> 44 <p class="p_category">《〜初級編〜》</p> 45 <h3>5 運用シミュレーション</h3> 46 <p class="p_date"><span class="date-y">2016</span><span class="date-mj">04/5</span></p></a> 47 </article> 48
■変更前CSSファイルの一部
lang
1 2body.home .front-loop .front-loop-cont { 3 padding: 40px 0; 4 overflow: hidden; 5}
■変更後CSSファイルの一部
lang
1body.home .front-loop .front-loop-cont { 2 padding: 20px 0; 3 overflow: hidden; 4 clear: left; 5}
■試してみたこと1
トップページのソースを開いてみて、IPHONEで見ると表示されなく記事のを探し出して、
CSSでその幅の変更や、回り込みの設定を解除するなど試してみたですが、変化はありませんでした。
■試してみたこと2
記事に問題があると思い、4つ目と5つ目の記事を削除したところ、
6つ目と7つ目の記事がIphoneで表示されなくなったので、記事の問題ではないと思っています。
解決の糸口が見つからず行き詰っております。アドバイス頂けると幸いです。
回答1件
あなたの回答
tips
プレビュー