VWSとは フォーラム Lightning Lightning Proの横幅の設定と中央揃えについて。

Lightning Proの横幅の設定と中央揃えについて。

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

    fj
    参加者

    Lightning Proの横幅調整について、ご教授いただき解決
    したのですが、中央揃えと幅の設定が機能しないページがあります。

    Lightning Proの横幅を変更したい。

    Lightning Proの横幅を変更したい。

    例えば個別ページの業務案内では中央揃えと幅が980pxになるが、
    個別ページの会社情報では中央揃えと幅980pxにならないという感じです。

    デベロッパーツールでみると、cssが機能しないページは
    classがmainSection-col-oneではなく、mainSection-col-twoと
    なっているようです。

    教えていただいたコード

    @media (min-width: 992px) {
    	.mainSection-col-one {
    		width: 980px;
    	}
    }
    
    @media (min-width: 1200px) {
    	.mainSection-col-one {
    		width: 980px;
    	}
    }

    下記、変更してみたコードです。
    記事全体をセンターにもってきたいので、
    margin: 0px auto
    .mainSection-col-two
    を追加しています。

    @media (min-width: 992px) {
    	.mainSection-col-one,.mainSection-col-two {
            width: 980px;
            margin: 0px auto
    	}
    }
    
    @media (min-width: 1200px) {
    	.mainSection-col-one,.mainSection-col-two {
            width: 980px;
            margin: 0px auto
    	}
    }}

    宜しくお願い致します。

    #30164

    DRILL LANCER
    モデレーター

    前回は1カラムのテンプレートを使用時に記事部分の幅を 980px にしたいという解釈でコーディングをしたので、あのようなコードになりました。

    しかし、今回はサイト全体の幅を最大 980px にしたいということのようなので前回のコードは無用となります。

    前回のコードを削除し、下記コードを適用することで実現可能になります。

    @media (min-width: 1200px) {
    	.siteHeadContainer.container .navbar-header,
    	.gMenu_outer nav,
    	.container{
    		max-width:980px;
    	}
    }

    前回と同じで Fort II 適用時に動作確認しました。

    P.S.
    この解釈が間違っているようならもっと詳しく説明をお願いします。

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

    fj
    参加者

    DRILL LANCER 様
    いつも、的確なご回答ありがとうございます。
    説明不足で申しがけございせん。

    @media (min-width: 1200px) {
    	.siteHeadContainer.container .navbar-header,
    	.gMenu_outer nav,
    	.container{
    		max-width:980px;
    	}
    }

    上記コードで全体の幅は980pxにり希望通りなのですが、
    ページコンテツ部分の余白を左右均等に割りたいです。

    添付画像の右側グレーの余白を左右均等に割ることは可能でしょうか。

    ※グレーの色はこちらで、分かりやすいように色付けしております。

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

    fj
    参加者

    グレーの部分が反映されていないようで、
    この画像のようにセンター揃えにしたいです。

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

    DRILL LANCER
    モデレーター

    右側の空白部分にはサイドバーが設置されるのですが、サイドバーは不要という解釈でよろしいでしょうか?
    その場合、下記コードを適用すれば解決できると思います。

    .sideSection {
    	display: none;
    }
    
    .mainSection-col-two{
    	float: none;
    	margin:0 auto;
    	width: 100%;
    }
    
    @media (min-width: 1200px){
    	.mainSection-col-two{
    		max-width:980px;
    	}
    }
    • この返信は9ヶ月、 3週前にDRILL LANCERが編集しました。理由: コードが効かなかったので編集
    #30194

    fj
    参加者

    DRILL LANCER様
    ご回答ありがとうございます。

    ご指摘の通り、右にサイドバーが設定されていました。

    すみません。バランスに試行錯誤しておりまして添付画像のようなカタチは
    可能でしょうか。

    サイト全体の幅は、980pxで1カラムのテンプレート(サイドバーなし)を使用時に
    記事部分の幅を700pxにしてたいです。

    もう少し記事部分の文字は大きくして行間を取る予定ですが、
    それでも左に寄りすぎてしまうためです。

    添付画像のピンクの薄い網掛部分に記事が移動する感じです。

    宜しくお願い致します。

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

    DRILL LANCER
    モデレーター

    サイドバーが必要なのか不要なのかはっきりとした回答を頂いておりませんので、
    サイドバーは不要という前提で #30176 のコードを編集してみました。

    .sideSection {
    	display: none;
    }
    
    .mainSection-col-two {
    	float: none;
    	margin:0 auto;
    	width: 100%;
    }
    
    @media (min-width: 992px) {
    	.mainSection-col-one,
    	.mainSection-col-two {
    		max-width:730px;
    		margin: 0 auto;
    	}
    }
    
    @media (min-width: 1200px) {
    	.mainSection-col-one,
    	.mainSection-col-two {
    		max-width:730px;
    		margin: 0 auto;
    	}
    }
    #30221

    fj
    参加者

    DRILL LANCER様
    ご回答ありがとうございます。

    すみません。サイドバーの設定はなしで
    ございます。

    横幅の間延びもなくなり、希望どおりの
    感じになりました。

    この度は色々とありがとうございました。

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