Different Column Widths in Front Page Sidebar Widgets

  • GERADOMI

    (@geradomi)


    11 years, 2 months ago

    I’m using twentytwelve child theme, using TinyMCE text editor to enter quite a lot of text for each of the two front sidebar widgets (889 words and 587 words, respectively). I wrote the text in MS Word and then used the special Word Insert icon to insert into the text editor.

    The column widths of the two sidebar widgets come out differently –the one on the right is quite a bit narrower.

    In style.css (parent), I see the widths under: .template-front-page .widget-area .widget

    The widths are codes with different %s — for the first sidebar widget(51.875%) and for the second(39.0625%)?

    I copied and pasted the code into my child’s style.css file. Then I played around with the %s — decreased the first % and increased the second % a little and a lot, also made them equal, but get weird results – can’t get equal-sized column widths?

    Am I forgetting to do something else, or completely misunderstanding how column widths % work? Or could this be a quirk of MS word, or too many words in one/both of the sidebar widgets?

    Help much appreciated.

Viewing 5 replies - 1 through 5 (of 5 total)
  • Michael

    (@alchymyth)

    11 years, 2 months ago

    difficult to tell without seeing the problem live;

    did you clear the browser cache after the changes to the style.css?

    the styles in the parent theme are within a @media query;
    possibly try the same in your child theme;

    example:

    @media screen and (min-width: 600px) {
	.template-front-page .widget-area .widget,
	.template-front-page.two-sidebars .widget-area .front-widgets {
		width: 51.875%;
	}
	.template-front-page .widget-area .widget:nth-child(even),
	.template-front-page.two-sidebars .widget-area .front-widgets + .front-widgets {
		width: 39.0625%;
	}
}

    Thread Starter GERADOMI

    (@geradomi)

    11 years, 2 months ago

    Sorry I couldn’t show it to you, but site is not yet up, and abn “under maintenance” plugin activated. http://www.smartgridix.com

    Thanks for the idea re @media……, I will try it.

    Note that I added a footer menu the day before this happened according to excellent video from “Lynda.com” — I don’t think that could have affected the second sidebar widget width, but I will check that too.

    Thread Starter GERADOMI

    (@geradomi)

    11 years, 2 months ago

    Tried it, but it did not work – it just made both front page widget sidebars narrower.

    So, I deleted all text from Black Studio Tiny MCE sidebars, moved the TinyMCEs out of the sidebars, moved them back into the sidebars, copied back the text from my Microsoft Word the text using Word Insert icon. Same result – different sidebar widths as above. Similar to having different column widths in a two-column page.

    Using Firebug, I can see that the “box” size of first front page sidebar widget (on the left) fills exactly 50% of the available full-page width (5 inches as measured on my screen of a 10 inch available total page width) and the second front page sidebar’s width (on the right) is smaller.

    Major coincidence: I physically measured the two sidebar widths, and they are in the same ratio as the percentages in the style sheet above! That is, the ratio of widths seems to be exactly 51.875 to 39.0625 – which are the %-s in the code from the style.css from the twentytwelve parent!!! (my measurement in inches is not absolutely precise, but this is too much of a coincidence.) So the widths are being set in the above ratio.

    As a possible fix, I added the two ratios together, divided them by two = 45.46875, and changed both %-s in twentytwelve child’s style.css to this new number, so that they are the same (both = 45.46875%) — neither of the widths change. When I change the %-s to any other number, neither width changes, which is weird, since the widths stay in the ratio of the %-s?

    I cleared cache, logged out and back in, refreshed, no change, widths different as before. So, I conclude that changing the %-s in the code at the top does not affect the widths, yet the widths are in the ratio of the two %-s!!!

    Do these clues help anyone tell me how to fix this? Thanks.

    Michael

    (@alchymyth)

    11 years, 2 months ago

    slight correction, but this works in my test site with a child theme of Twetny Twelve:

    @media screen and (min-width: 600px) {

	.template-front-page.two-sidebars .widget-area .front-widgets {
		width: 45.57%;
	}
	.template-front-page.two-sidebars .widget-area .front-widgets + .front-widgets {
		width: 45.57%;
	}
}

    I can only guess that something in your style.css is broken and keeps some styles further down from getting applied;

    try and see if using this http://jigsaw.w3.org/css-validator/ gives you some insights.

    Thread Starter GERADOMI

    (@geradomi)

    11 years, 2 months ago

    Alchymyth,

    You are brilliant!

    It worked!

    Heartfelt thanks!!!

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Different Column Widths in Front Page Sidebar Widgets’ is closed to new replies.