【CSS備忘録】Lightningでメインコンテンツとサイドバーの横幅を広げる
wordpressのlightningのスキムを利用していて、ヘッダーに対して、メインコンテンツの幅が少し狭い（左右に余白が多い）のでcssで修正した時のメモ。ついでにメインセクションとサブセクションの幅も修正。
※@media (min-width: 768px)はすでにワンコラムになっているかも・・・まあいいや
@media (min-width: 1200px) {
.container,
.container-lg,
.container-md,
.container-sm,
.container-xl {
max-width: 96%;
/* 画面幅の98%の幅に設定 */
margin: 0 2%;
/* 左右の余白を画面幅の2%に設定 */
padding: 0% 2%;
--vk-width-col-2-main: 70%;
--vk-width-container-padding: 0px;
--vk-width-col-2-sub: calc(var(--vk-width-container)*0.27);
}
.sub-section {
margin-left: 0.5%;
margin-top: 1%;
padding: 0;
}
.main-section {
margin-right: 0.5%;
/* サイドバーとメインコンテンツの間の横のスペースを設定 */
padding: 0;
}
}
@media (min-width: 992px) {
.container,
.container-lg,
.container-md,
.container-sm {
max-width: 96%;
/* 画面幅の98%の幅に設定 */
margin: 0 2%;
/* 左右の余白を画面幅の2%に設定 */
padding: 0% 2%;
--vk-width-col-2-main: 70%;
--vk-width-container-padding: 0px;
--vk-width-col-2-sub: calc(var(--vk-width-container)*0.27);
}
.sub-section {
margin-left: 0.5%;
margin-top: 1%;
padding: 0;
}
.main-section {
margin-right: 0.5%;
/* サイドバーとメインコンテンツの間の横のスペースを設定 */
padding: 0;
}
}
@media (min-width: 768px) {
.container,
.container-md,
.container-sm {
max-width: 96%;
/* 画面幅の98%の幅に設定 */
margin: 0 2%;
/* 左右の余白を画面幅の2%に設定 */
padding: 0% 2%;
--vk-width-col-2-main: 70%;
--vk-width-container-padding: 0px;
--vk-width-col-2-sub: calc(var(--vk-width-container)*0.27);
}
.sub-section {
margin-left: 0.5%;
margin-top: 1%;
padding: 0;
}
.main-section {
margin-right: 0.5%;
/* サイドバーとメインコンテンツの間の横のスペースを設定 */
padding: 0;
}
}
@media (min-width: 576px) {
.container,
.container-sm {
max-width: 96%;
/* 画面幅の98%の幅に設定 */
margin: 0 2%;
/* 左右の余白を画面幅の2%に設定 */
padding: 0% 2%;
}
}
