[ 解決済 ] グリッドカラムカードのレスポンシブについて

VWSとは フォーラム Lightning [ 解決済 ] グリッドカラムカードのレスポンシブについて

[ 解決済 ] グリッドカラムカードのレスポンシブについて

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

    fuku
    参加者

    ■ WordPress のバージョン
    6.6.2

    ■ テーマ・プラグインは全て最新版で確認してください。
    確認しました。

    ■ テーマの種類
    Lightning ( G3 ) + Lightning G3 Pro Unit

    ■ テーマのバージョン
    15.26.4(Lightning Childバージョン: 0.5.1)

    ■ Pro Unit のバージョン
    0.27.1

    ■ スキンの種類
    Origin III

    ■ 期待する動作
    グリッドカラムカードを4列連続で使用すると、
    タブレットサイズ内のある範囲では、
    2個1個2個1個…と交互になってしまうため、
    3個(PC~タブレット)か1個(タブレット~モバイル)の
    どちらかで切り替わるようにしたい。

    または、4個並び(PC)にして、2個(タブレット)1個(モバイル)にしたい。

    ■ 自分で試した事
    カラム幅設定欄で、単位を%にして、数字をいろいろ試してみたのですが、うまく指定ができませんでした。

    ■ 症状が発生するブラウザ
    chrome、edge

    ■ 実際の症状
    グリッドカラムカードを使用して、全部で11カラムの項目を作りたいです(3×4、1つ削除)。

    グリッドカラムカードを4列連続で使用すると、
    中間のタブレットサイズの範囲内で、2個と1個の2列に分かれてしまうポイントがあります。

    その範囲では、2個1個2個1個…と交互になってしまうため、
    3個(PC~タブレット)か1個(タブレット~モバイル)のどちらかで切り替わるようにしたいのですが、
    指示の出し方が分かりません。

    カラム幅設定欄に
    「タブレットまたはPCの最小列サイズを%で指定すると、画面サイズに応じて上下の行の列数を揃えやすくなります。」
    と記載があるので、単位を%にして、数字をいろいろ試してみたのですが、うまく指定ができませんでした。

    できれば、タブレットサイズでは2個2個2個…と並べられると良いのですが、
    難しければ、3個並びか1個だけかのどちらかで表示されるような指示の方法を教えていただけると有難いです。

    ーーーーーーーーーーーーーーーーーーーー
    ※2023.4.20の「[ 解決済 ] VK Blocks Pro サービスの流れ (グリッドカラムカード)カードの位置レイアウト変更」を参照しました。

    こちらの質問によると、グリッドカラムカードは、デフォルトの3個並び(PCの時)以外にも増やせるのでしょうか?

    うなこ様の添付資料を見て、画像の通りの数字にしてみたり、数字を変えてみたりしたのですが、カラム数を増やすこともできず、調整できませんでした。

    横に4カラム並べることが出来るとしたら、タブレットでは2個ずつカラム落ちし、モバイルでは1個になる、という指示もできるのでしょうか。

    ご教示いただけると幸いです。

    #102832

    > タブレットサイズ内のある範囲では、
    > 2個1個2個1個…と交互になってしまうため、

    一つのグリッドカラムブロックの中のグリッドカラムアイテムブロックを増やしていれば通常そうはならないので、グリッドカラムブロック(親ブロック)を複数配置していませんか?

    いずれにせと文面だと現状どういう状態で、どういう状態にしたいのかわからないので、
    該当URL(またはテストサイトなどに同じ症状を再現させたURL)やスクリーンショットなどがあると回答しやすいです。

    #102834

    fuku
    参加者

    石川様

    ご返信ありがとうございます。

    スクリーンショットを添付しました。
    これはグリッドカラムカードブロックをコピペ(2回)しただけの状態です。
    親カラムを作って中に入れているのではなく、そのまま「+」で段落を出してペーストしています。

    幅の指定をしないままだと、
    タブレットサイズが2個1個の繰り返しになってしまう状態です。

    Attachments:
    You must be logged in to view attached files.
    #102836

    2つ目のグリッドカラムブロックの中のグリッドカラムアイテムブロックを
    1つ目のグリッドカラムブロックの中に移動してみてください。
    2つ目のグリッドカラムブロックの中身は空になったら削除してかまいません。

    Attachments:
    You must be logged in to view attached files.
    #102838

    fuku
    参加者

    4個目のグリッドカラムアイテムブロックを、1~3個の入ったグリッドカラムブロックの中に入れるということでしょうか。
    すみません、グリッドカラムブロックの中に移動させる方法が分かりません…。

    #102839

    これで伝わりますか?

    Attachments:
    You must be logged in to view attached files.
    #102841

    fuku
    参加者

    石川様

    できました!!!
    感動~!
    ありがとうございます!!!

    #102842

    無事できたようでよかったです。

    今後とも弊社製品をよろしくお願いいたします。

8件の投稿を表示中 - 1 - 8件目 (全8件中)
  • このトピックに返信するにはログインが必要です。