twentyfourteenでウィジェットの幅を広くしたい

  • yiia

    (@yiia)


    7年、 11ヶ月前

    twentyfourteenを使っています。
    CSSで下記の場所の数値を変えメインサイドバーの幅は広がりました。
    しかしウィジェットの部分は広がらなくて文字が途中で折返してる状態なのでその部分をメインサイドバーと同じようにしたいです。

    `@media screen and (min-width: 1080px) {
    .search-box .search-field {
    width: 324px;
    }

    .site-content,
    .site-main .widecolumn {
    margin-left: 222px;
    }

    .site:before {
    width: 222px;
    }

    .search-box-wrapper,
    .featured-content {
    padding-left: 222px;
    }

    #secondary {
    width: 162px;
    }

    .secondary-navigation,
    .secondary-navigation ul ul {
    width: 222px;
    }

    どの部分をチェックすればいいのか教えていただけると嬉しいです。
    よろしくお願いします。

2件の返信を表示中 - 1 - 2件目 (全2件中)
  • ishitaka

    (@ishitaka)

    7年、 11ヶ月前

    下記の『ここ』の値をすべて変更してみてください。

    @media screen and (min-width: 1080px) {
	.search-box .search-field {
		width: 324px;
	}

	.site-content,
	.site-main .widecolumn {
		margin-left: 222px; /* ここ。値は #secondary の幅 + 60px(左右マージン分)。 */
	}

	.site:before {
		width: 222px; /* ここ。値は #secondary の幅 + 60px(左右マージン分)。 */
	}

	.search-box-wrapper,
	.featured-content {
		padding-left: 222px; /* ここ。値は #secondary の幅 + 60px(左右マージン分)。 */
	}

	#secondary {
		width: 162px; /* ここ */
	}

	.secondary-navigation,
	.secondary-navigation ul ul {
		width: 222px; /* ここ。値は #secondary の幅 + 60px(左右マージン分)。 */
	}

	.secondary-navigation ul li:hover > ul,
	.secondary-navigation ul li.focus > ul {
		left: 202px; /* ここ。値は .secondary-navigation の幅 - 20px(左マージン分)。 */
	}
    • この返信は7年、 11ヶ月前にishitakaが編集しました。
    トピック投稿者 yiia

    (@yiia)

    7年、 11ヶ月前

    ishitaka様ありがとうございます。

    無事にサイドバーが広がり文字も折返さなくなりました。
    ありがとうございました。

2件の返信を表示中 - 1 - 2件目 (全2件中)
  • トピック「twentyfourteenでウィジェットの幅を広くしたい」には新たに返信することはできません。