WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] [Theme: Twenty Twelve] Extra Widget Array, Unresponsive. (5 posts)

  1. gcoulby
    Member
    Posted 1 year 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 http://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.

  2. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    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.

  3. gcoulby
    Member
    Posted 1 year ago #

    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.

  4. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    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.

  5. gcoulby
    Member
    Posted 1 year ago #

    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.

Topic Closed

This topic has been closed to new replies.

About this Topic