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

このトピックには7件の返信、2人の参加者があり、最後にfjにより4年、 10ヶ月前に更新されました。

8件の投稿を表示中 - 1 - 8件目 (全8件中)

投稿者

投稿
2020年1月12日 2:08 PM #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
	}
}}
```
宜しくお願い致します。
2020年1月12日 2:33 PM #30164
DRILL LANCER
モデレーター
前回は１カラムのテンプレートを使用時に記事部分の幅を 980px にしたいという解釈でコーディングをしたので、あのようなコードになりました。

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

前回のコードを削除し、下記コードを適用することで実現可能になります。
```
@media (min-width: 1200px) {
	.siteHeadContainer.container .navbar-header,
	.gMenu_outer nav,
	.container{
		max-width:980px;
	}
}
```
前回と同じで Fort II 適用時に動作確認しました。

P.S.
この解釈が間違っているようならもっと詳しく説明をお願いします。
- この返信は4年、 10ヶ月前にDRILL LANCERが編集しました。
2020年1月12日 3:46 PM #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.
2020年1月12日 3:48 PM #30174

fj
参加者

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

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

2020年1月12日 3:53 PM #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;
	}
}
```
- この返信は4年、 10ヶ月前にDRILL LANCERが編集しました。理由: コードが効かなかったので編集
2020年1月12日 7:57 PM #30194

fj
参加者

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

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

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

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

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

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

宜しくお願い致します。

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

2020年1月12日 8:25 PM #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;
	}
}
```
2020年1月13日 9:30 AM #30221

fj
参加者

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

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

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

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

投稿