[ 解決済 ] Facebookページを埋め込んだ時のタブレット表示

[うさくま堂]

WordPress 5.4.2
Lightning Proバージョン: 5.0.7
Lightning Skin JPNSTYLEバージョン 5.2.5

固定ページのブロックエディタ、2カラム（左が狭い）を利用し、左にFacebookページ埋め込み、右にテキストを入れています。
PC（MacOS、Chrome）、モバイル（iPhone11、Safari）では正しく見えますが、タブレット（iPad10.2インチ仕様、Safari）では、添付の通り左右が重なってしまいます。
カラムの幅を等間隔や左を広いものに変更しても同じです。

対処法や注意点がございましたらご教示くださいませ。

Attachments:

You must be logged in to view attached files.

---

該当URL : https://*********

※該当URLはフォーラムライセンスが有効のユーザーにのみ表示されます

[Vektor,Inc]

Facebook Page Plugin はおすすめはカラムブロックに入れるのは諦めてウィジェットで VK FB Page Plugin ウィジェットをフッターに入れるのがおすすめですが、やはりここじゃないとダメという場合は…

Facebook Page Plugin は幅を変更する事は難しいのでカラムブロックの幅をCSSで指定する方が現実的かと思います。

WordPress標準のカラムブロックはちょっとCSSがきつそうなので、VK Blocks のグリッドカラムブロックで２カラムにして配置し、グリッドカラムに対して、「高度な設定」パネルからcssを追加指定（例としてtestと入力するものとします）しつつ

外観 > カスタマイズ > 追加CSSなどに以下のように書くと良いと思います。

@media (min-width: 768px){
	.test.row .wp-block-vk-blocks-grid-column-item:first-child {
		flex-basis:70%;
		max-width:70%;
	}
	.test.row .wp-block-vk-blocks-grid-column-item:nth-child(2) {
		flex-basis:30%;
		max-width:30%;
	}
}

※予想以上に検証に時間がかかり、利用者全員に恩恵のあるのエフェクトブロックやスライドブロックの調整作業の方を進めたいので公式のサポートはここまでとさせていただきます。

[うさくま堂]

連絡が遅くなり申し訳ありません。
また、検証に時間がかかる案件でありながらも、丁寧なご説明ありがとうございました。

現状から、カラム幅を33.333…から50に変更したところ、きちんと表示されました。
これが正しい対応とは思えないのですが、このまま様子を見てみます。

また崩れてしまうようでしたら、いただいたアドバイスを元に対応いたします。

Attachments:

You must be logged in to view attached files.

[投稿者]

投稿