reducing width of the sidebar in the Gazette Theme

  • Unknown's avatar
    antoniacollages · Member ·

    Hi,
    I would like to make the width of the sidebar in the Gazette Theme smaller.

    I used this code

    .single .site-content-inner {
    max-width: 1160px;
    padding-left: 30px;
    padding-right: 30px;
    width: 60%;
    }

    And that works on the PC but on a phone and tablet it reduces the size of the images (in the primary content area)

    Hopefully there is another code which just reduces the sidebar and that doesn’t effect the size of the primary content area?

    Thanks in advance for sharing…
    Best,
    Antonia

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    antoniacollages · Member ·

    Then I also tried

    }
    .single .site-content-inner {
    max-width: 1160px;
    padding-left: 140px;
    padding-right: 0px;
    width: 100%;
    }
    .single .site-main {
    max-width: 1000px;
    width: 100%;
    }
    body:not(.long-menu) .main-navigation, .page .widget-area, .single .widget-area, .rtl.page .site-main, .rtl.single .site-main {
    border-left-color: #FFF;
    }

    Doesn’t work on the mobile either… could be do-able on the I-pad, but I think there must be a far way better (cleaner) solution…

    I will have to wait for that reply, and stop finding out for myself….;)

  • Unknown's avatar
    thesacredpath · Member ·

    Hi, originally the sidebar had a maximum width of 331px. The following reduces that to 200px and then adds the 131px reduction in sidebar width to the content area. 

    .page .widget-area, .single .widget-area {
    max-width: 200px;
    width: 100%;
}
.page .comments-area, .page .site-main, .single .site-main {
    max-width: 1061px;
    width: 100%;
}
@media screen and (max-width: 1379px) {
	.page .widget-area, .single .widget-area {
		max-width: 100%;
		width: 100%;
	}
}

    The last rule above takes the widget area to 100% width once it drops below the content area at 1379px. Then at 959px in width, the original design hides the widgets behind the widget toggle button below the content.

  • The topic ‘reducing width of the sidebar in the Gazette Theme’ is closed to new replies.