VWSとは フォーラム Lightning [ 解決済 ] Facebookページを埋め込んだ時のタブレット表示

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

3件の投稿を表示中 - 1 - 3件目 (全3件中)
  • 投稿者
    投稿
  • #39148

    うさくま堂
    参加者

    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はフォーラムライセンスが有効のユーザーにのみ表示されます

    #39176

    Vektor,Inc
    キーマスター

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

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

    WordPress標準のカラムブロックはちょっとCSSがきつそうなので、VK Blocks のグリッドカラムブロックで2カラムにして配置し、グリッドカラムに対して、「高度な設定」パネルから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%;
    	}
    }

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

    #39243

    うさくま堂
    参加者

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

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

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

    Attachments:
    You must be logged in to view attached files.
3件の投稿を表示中 - 1 - 3件目 (全3件中)
  • このトピックに返信するにはログインが必要です。