help please with changing width of sidebar in Twenty Twelve child

  • Resolved 5high

    (@5high)


    10 years, 10 months ago

    Hi,
    I have a child theme of 2012, and am trying to reduce the width of the custom right sidebar – with corresponding increase in width of the content area.
    I’ve tried lots of variations of this code…

    .site-content {
		float: left;
		width: 67.104166667%;
	}
.widget-area {
		float: right;
		width: 24.041666667%;
	}

    with and without the @media screen and (min-width: 600px) query, but with no effect at all. Looking at it with firebug, even when I’ve changed the percentages, it somehow still shows the original one in my child theme – even though it’s not there now! (and yes, I do clear the cache each reload).

    My current css is this…

    @media screen and (min-width: 600px) {
/* to reduce width of sidebar area from 26.041666667% */
    .widget-area  {
        clear: right;
        float: right;
        width: 24.041666667%;
    }
/* to reduce width of sidebar area from 26.041666667% */
    .right-sidebar.custom-layout .widget-area {
        clear: right;
        float: right;
        width: 24.041666667%;
    }

/* to increase width of main contents part of page, was 65.104166667%, with corresponding reduction in right sidebar width, totaling = 91.145833334% ... */
	.site-content {
	width: 67.104166667%;
	}
}

    with using my child sidebar selectors (.right-sidebar.custom-layout .widget-area) too, but it still makes no difference!

    I am at a total loss as to why this won’t show up, so would appreciate any help at all – the site is https://trevorpenfold.com/

    Also I don’t really understand why the 2 percentages have to add up to 91.145833334%, rather than nearer 100%, like with the 2011 theme. Is it related to the percentage of the screen it uses??

    Thanks.

Viewing 4 replies - 1 through 4 (of 4 total)

  • Try using primary secondary declarations

    #primary {
    width: 70%;
    }
    #secondary {
    width: 22%;
    }

    Thread Starter 5high

    (@5high)

    thanks for your reply batharoy – I tried it both with and without my current css edits – and no luck.

    What really amazes me is that is still shows the css styling as coming from my commented out child selector!

    Any other ideas??

    Thread Starter 5high

    (@5high)

    Hi batharoy,
    well I’ve re-tried today, and found that your suggestion did work. And in fact all of the above ones worked too! So now I just have this:

    @media screen and (min-width: 600px) {
/* reduce width of sidebar area from 26.041666667% ....*/
    .right-sidebar.custom-layout .widget-area {
        clear: right;
        float: right;
        width: 24%;
    }
}

    though it works with just using the .widget-area selector on its own too.
    The only reason I could find that it didn’t work before, was that the style.css on the server hadn’t changed in 2 days, yet I had thought I was uploading it frequently yesterday – so don’t know what had happened with Firezilla then.

    So all sorted – thanks for all suggestions.

    Finally, just wanted to know if I should put in the changed (increased) size in % for .site-content? It doesn’t seem to need it, but is this good practice?

    Cheers.

    Thread Starter 5high

    (@5high)

    OK, I’ve at last ‘got it’! Without putting in the increase in % for .site-content I end up with a large space between the main content text and my sidebar, as it’s reading the original 65.104166667%.

    As I’ve reduced the site padding etc too, I’ve now increased it to a total of 94%, so 22% for the sidebar/widget area + 72% for the site-content area, both in the @ media query for > 600px – and it all seems to work great!

    Thanks for the help.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘help please with changing width of sidebar in Twenty Twelve child’ is closed to new replies.