サポート » テーマ » oxygenでウィジェットの幅を調整したい

  • 解決済 Hanazo

    (@hanazo)


    初めて投稿します、初心者です。

    oxygenを使っているのですが、max-width: 940pxの中でサイドバーの幅を少し広げようとstyle.cssで変更をしました。
    サイドバーと全体のバランスは問題なく希望通りになったのですが、その中に表示させている
    ウィジェットの幅だけ、なぜか狭くなってしまい、カレンダーやリストの表示が崩れてしまいました。
    色々調整できそうなところを探したのですが、わかりませんでした。
    (/* Widgets の部分は何も変更していません。)
    style.cssの中で足りない作業があるのか、別のファイルでも修正が必要なのか等、ご教示いただければと思います。

    基本的なことで申し訳ありませんが、どうぞよろしくお願いします。

    /* Layout
    -------------------------------------------------------------- */
    #main {
    	clear: both;
    	width: 100%;
    	margin: 0 auto;
    	position: relative;
    }
    .page-template-fullwidth #content { width: 100%; }
    .content-wrap {
    	float: right;
    	width: 78.7234042553191%;	/* 740 / 940 = 0.787234042553191 */
    }
    .page-template-fullwidth .content-wrap { width: 100%; }
    #content {
    	float: left;
    	width: 100.0%;	/* 740/ 740 = 1.0 */
    	margin: 0 0 30px 0;
    }
    .aside {
    	float: left;
    	width: 18.0851063829787%;	/* 170 / 940 = 0.180851063829787 */
    }
    #sidebar-primary {
    	float: left;
    	width: 18.0851063829787%;	/* 170 / 940 = 0.180851063829787 */
    }
    #sidebar-secondary {
    	float: right;
    	width: 33.33333333333333%;	/* 250 / 750 = 0.3333333333333333 */
    }
    .wrap {
    	max-width: 940px;
    	margin: 0 auto;
    	position: relative;
    }
    #comments-template { clear: left; }
2件の返信を表示中 - 1 - 2件目 (全2件中)
  • モデレーター jim912

    (@jim912)

    Hanazoさん、こんにちは。

    計算違いが1カ所

    #content {
    	float: left;
    	width: 63.5135135135135%;	/* 470/ 740 = 0.635135135135135 */
    	margin: 0 0 30px 0;
    }

    修正不要なのに修正している箇所が1カ所

    #sidebar-primary {
    	float: left;
    	width: 100%;	/* asideの中の幅なので100%でおk */
    }

    です。

    トピック投稿者 Hanazo

    (@hanazo)

    Jim912様

    こんにちは、ご回答ありがとうございます!
    ご指摘の通り、#sidebar-primaryを100%にしたら奇麗になおりました!!
    「asideの中の幅」だったんですね。。勉強不足で失礼致しました。
    #contentのほうは100%のままで大丈夫でした。

    もうどこを確認したらいいかわからず、途方に暮れていました。。
    このような初心者にご対応していただいて、本当に感謝しております。

    今後とも、どうぞ宜しくお願い致します。

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