Support » Themes and Templates » [Theme: Twenty Twelve] Extra Widget Array, Unresponsive.

  • Resolved gcoulby


    I have created a new widget array on the static home of my twenty twelve. My install is fresh there and are no plugins installed. The third widget appears in the widget section and I have successfully added a text box. This all worked until I tried to make a three column layout. I want each widget to be W:30% with a 3% padding between them. In firebug I have isolated the widget areas and changed the code to

    .template-front-page .widget-area .widget, .template-front-page.two-sidebars .widget-area .front-widgets {
        float: left;
        margin-bottom: 1.71429rem;
        width: 30%;   /* I CHANGED THIS VALUE */
    .template-front-page .widget-area .widget:nth-child(2n+1) {
        clear: right;
    .template-front-page .widget-area .widget:nth-child(2n), .template-front-page.two-sidebars .widget-area .front-widgets + .front-widgets {
        float: left;
        margin-left: 3.3%;   /* I CHANGED THIS VALUE */
        width: 30%;         /* I CHANGED THIS VALUE */
    .template-front-page.two-sidebars .widget, .template-front-page.two-sidebars .widget:nth-child(2n) {
        float: none;
        width: auto;

    When I make the changes in firebug the widgets stack vertically in ‘mobile’ view making it possible to read the text. However, when I copy the code to my child-theme it displays correctly in browser views but does not stack vertically in mobile view – they stay horizontal and get really thin.

    Here is my website -help on this would be greatly appreciated. If anyone has firebug try disabling the values from the child theme and making the changes to the parent you will see.

Viewing 4 replies - 1 through 4 (of 4 total)
  • I think you need to set a minimum width (maybe approx 300px or whatever that is in rem) in your top CSS declaration – so that at that width they widgets stop shrinking and drop below the one next to it.

    OH MY GOD! Why is it that the seemingly most difficult problems are always an overlook over something so small! I can’t believe I didn’t think of that. Thank you! I suppose it just takes someone standing outside of the project to see it.

    Yeah, we’ve all been there :). That’s the kind of thing than suddenly occurs to me while out running or in a yoga class – get the cobwebs out of your brain and bingo! Anyway, that page looks really nice, and glad it got sorted.

    Thanks, I’m making a master-child, which is why its so plain at the moment. However, I plan to get stock set of code to work from as I love twenty twelve but not out of the box.

    Out of interest do you know where the settings are for the mobile menu That nav bar i am using has an overflow:hidden on which conflicts with the mobile menu. I want a mobile menu that drops down, with completely different styling.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘[Theme: Twenty Twelve] Extra Widget Array, Unresponsive.’ is closed to new replies.