[ 解決済 ] 表示画面がくずれる
[ 解決済 ] 表示画面がくずれる
- このトピックには7件の返信、3人の参加者があり、最後に
により4年、 4ヶ月前に更新されました。
-
投稿
-
■ 症状が発生するブラウザ :
クローム/エッジ 他
■ 利用テーマとバージョン :
Lightningバージョン: 14.4.2
Lightning G3 Pro Unit
バージョン 0.3.5
originⅢ
■ 質問内容：
表示画面を広げようと
Lightningレイアウト設定のコンテナサイズの設定を
すべて1280pxに広げたのですが
コンテナサイズ [lg]領域表示での表示時
サイドバーの表示が逃げてしまい画面がくずれます
他は大丈夫な感じです
確認をお願いします該当URL : https://*********※該当URLはフォーラムライセンスが有効のユーザーにのみ表示されます
コンテナ設定はコンテナの最大幅 (max-width) を設定していますが、
lg は画面幅 992px～1199px のことですので、
表示くずれの対策としては、1199px992px を超えない数値を指定するとよいです。【追記・訂正】
DRILL LANCER さんが書かれている通りですので、上記の通り訂正いたします。それぞれの画面幅は以下の通りです。()内はデフォルトのコンテナ設定です。
xs : ～575px (なし)
sm : 576px～767px (540px)
md : 768px～991px (720px)
lg : 992px～1199px (960px)
xl : 1200px～ (1140px)出力される CSS は下記のようになります。（下記は lg のみ値を入力した場合）
@media (min-width: 992px) { :root{ --vk-width-container : 960px; } .container { max-width: 960px; } }意味は画面幅が 992px 以上 ( 1200px 未満 ← Bootstrap4 の仕様 ) ならコンテナ幅を 960px 確保するという意味です。
なので、lg に 992 以上の値を入れるとレイアウトが崩れたりスクロールバーが表示されたりする要因になります。対馬様
いつもありがとうございます
ご教授いただいた
設定値の最大値に設定したところ
＞lg : 1199px の場合 同様にサイドバーが逃げてしまいました
そこで1158まで狭めたところうまく表示されました
ありがとうございました追記
今回広げたく思ったのは津島さんのlighitning G3 サイト（以前案内いただいた）
をみて、全幅でスムーズで理想的だと思って、広げたく思いました
可能でしたら津島さんのlighitning G3 サイトの 設定値をご教示願えればうれしいです
わがまま言いますが、可能でしたらよろしくお願いします1158まで狭めたところうまく表示されました
攻めますねぇ～。
いま試してみたところ、1158 にすると画面幅 992px ではくずれてしまいます。
原則的には 992 が上限ですが、自己責任でやる場合でも 1100 くらいにしておいた方がよさそうです。全幅でスムーズで理想的だと思って、広げたく思いました
そうなんですか… 意外な動機でしたが、そんなふうに言われるとうれしいです (^^♪
私の G3 勉強用サイトではコンテナサイズを指定していません。(デフォルトのままです)
たぶん https://lightning-g3.hp1.work/ のことですよね。設定値をご教示願えればうれしいです
以下のように設定して使っています。
【トップページ・固定ページ】
Lighting レイアウト設定 → カラム設定 で 1カラム にしてあります。
サイドバーを表示していません。【投稿】
Lighting レイアウト設定 → カラム設定 を 2カラム にして、
個々の投稿で全幅にしたいときに 1カラム (サイドバー要素あり) を指定しています。とりあえず回答としてはこれだけなんですが、他にご質問があればどうぞ。
- このトピックに返信するにはログインが必要です。
