[Theme: Twenty Twelve] Extra Widget Array, Unresponsive.

  • Resolved gcoulby

    (@gcoulby)


    12 years, 1 month ago

    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 https://www.apalis.co.uk -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.

    Thread Starter gcoulby

    (@gcoulby)

    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.

    Thread Starter gcoulby

    (@gcoulby)

    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.