[ 解決済 ] 表示画面がくずれる

VWSとは フォーラム バグ報告と提案 [ 解決済 ] 表示画面がくずれる

[ 解決済 ] 表示画面がくずれる

  • このトピックには7件の返信、3人の参加者があり、最後にkomori0321により1ヶ月、 1週前に更新されました。
8件の投稿を表示中 - 1 - 8件目 (全8件中)
  • 投稿者
    投稿
  • #53372

    komori0321
    参加者

    ■ 症状が発生するブラウザ :
    クローム/エッジ 他
    ■ 利用テーマとバージョン :
    Lightningバージョン: 14.4.2
    Lightning G3 Pro Unit
    バージョン 0.3.5
    originⅢ
    ■ 質問内容:
    表示画面を広げようと
    Lightningレイアウト設定のコンテナサイズの設定を
    すべて1280pxに広げたのですが
    コンテナサイズ [lg]領域表示での表示時
    サイドバーの表示が逃げてしまい画面がくずれます
    他は大丈夫な感じです
    確認をお願いします

    • このトピックはkomori0321が1ヶ月、 1週前に変更しました。

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

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

    #53374

    komori0321
    参加者

    サイドバーが下に逃げてしまし
    消えているときの画像です
    添付しておきます

    オレンジで囲んだ部分が消えて
    下にずれてます

    • この返信は1ヶ月、 1週前にkomori0321が編集しました。
    Attachments:
    You must be logged in to view attached files.
    #53377

    コンテナ設定はコンテナの最大幅 (max-width) を設定していますが、
    lg は画面幅 992px~1199px のことですので、
    表示くずれの対策としては、1199px 992px を超えない数値を指定するとよいです。

    【追記・訂正】
    DRILL LANCER さんが書かれている通りですので、上記の通り訂正いたします。

    それぞれの画面幅は以下の通りです。()内はデフォルトのコンテナ設定です。

    xs : ~575px (なし)
    sm : 576px~767px (540px)
    md : 768px~991px (720px)
    lg : 992px~1199px (960px)
    xl : 1200px~ (1140px)

    参考ページ ↓
    https://getbootstrap.jp/docs/4.2/layout/grid/

    • この返信は1ヶ月、 1週前に対馬 俊彦が編集しました。
    #53379

    DRILL LANCER
    モデレーター

    出力される CSS は下記のようになります。(下記は lg のみ値を入力した場合)

    @media (min-width: 992px) {
    	:root{
    		--vk-width-container : 960px;
    	}
    	.container {
    		max-width: 960px;
    	}
    }

    意味は画面幅が 992px 以上 ( 1200px 未満 ← Bootstrap4 の仕様 ) ならコンテナ幅を 960px 確保するという意味です。
    なので、lg に 992 以上の値を入れるとレイアウトが崩れたりスクロールバーが表示されたりする要因になります。

    • この返信は1ヶ月、 1週前にDRILL LANCERが編集しました。
    • この返信は1ヶ月、 1週前にDRILL LANCERが編集しました。
    • この返信は1ヶ月、 1週前にDRILL LANCERが編集しました。
    #53385

    komori0321
    参加者

    対馬様

    いつもありがとうございます

    ご教授いただいた
    設定値の最大値に設定したところ
    >lg : 1199px の場合 同様にサイドバーが逃げてしまいました
    そこで1158まで狭めたところうまく表示されました
    ありがとうございました

    追記
    今回広げたく思ったのは津島さんのlighitning G3 サイト(以前案内いただいた)
    をみて、全幅でスムーズで理想的だと思って、広げたく思いました
    可能でしたら津島さんのlighitning G3 サイトの 設定値をご教示願えればうれしいです
    わがまま言いますが、可能でしたらよろしくお願いします

    • この返信は1ヶ月、 1週前にkomori0321が編集しました。
    #53386

    komori0321
    参加者

    モデレーター様

    ありがとうございます
    参考にします

    #53387

    1158まで狭めたところうまく表示されました

    攻めますねぇ~。
    いま試してみたところ、1158 にすると画面幅 992px ではくずれてしまいます。
    原則的には 992 が上限ですが、自己責任でやる場合でも 1100 くらいにしておいた方がよさそうです。

     

    全幅でスムーズで理想的だと思って、広げたく思いました

    そうなんですか… 意外な動機でしたが、そんなふうに言われるとうれしいです (^^♪
    私の G3 勉強用サイトではコンテナサイズを指定していません。(デフォルトのままです)
    たぶん https://lightning-g3.hp1.work/ のことですよね。

     

    設定値をご教示願えればうれしいです

    以下のように設定して使っています。

    【トップページ・固定ページ】
    Lighting レイアウト設定 → カラム設定 で 1カラム にしてあります。
    サイドバーを表示していません。

    【投稿】
    Lighting レイアウト設定 → カラム設定 を 2カラム にして、
    個々の投稿で全幅にしたいときに 1カラム (サイドバー要素あり) を指定しています。

    とりあえず回答としてはこれだけなんですが、他にご質問があればどうぞ。

    • この返信は1ヶ月、 1週前に対馬 俊彦が編集しました。
    #53390

    komori0321
    参加者

    対馬様

    お世話になります
    いろいろありがとうございます
    参考にしながら試してみます

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