StudioPress

Forum navigation

Are You Using The WordPress Block Editor?

Genesis now offers plugins that help you build better sites faster with the WordPress block editor (Gutenberg). Try the feature-rich free versions of each plugin for yourself!

Genesis Blocks Genesis Custom Blocks

how to Modify Flexible Widgets to display 2 uneven columns – Monochrome Pro

Welcome!

These forums are for general discussion on WordPress and Genesis. Official support for StudioPress themes is offered exclusively at My StudioPress. Responses in this forum are not guaranteed. Please note that this forum will require a new username, separate from the one used for My.StudioPress.

Community Forums › Forums › Archived Forums › Design Tips and Tricks › how to Modify Flexible Widgets to display 2 uneven columns – Monochrome Pro

This topic is: resolved

Tagged: , , , ,

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • February 2, 2019 at 12:23 pm #489241
    doubler59
    Member

    The Monochrome Pro theme has some flexible layout options for its home page https://my.studiopress.com/documentation/monochrome-pro-theme/front-page-setup/front-page-flexible-layout-configurations/ ... however, I can't figure out how best/easiest to configure it this way: 2 responsive columns, with the left column approx 66% width and the right column 33%. The left column would have 2 text widgets (stacked) and the right column would have 1 text widget.

    I found a similar question regarding the options on the Digital Pro theme home page...when I referred to that theme's flexible layout options, I see that option #4 would be workable for me and I could probably just define the max-widths in css for each widget. If that makes sense, is there a way to configure the Monochrome widget area so it has this same option?

    I wish these layout options were easily configurable in the Customize area. Just saying.

    thanks in advance for any help!

    Robin

    February 2, 2019 at 3:07 pm #489245
    Victor Font
    Moderator

    The monochrome_widget_area_class function in functions.php determines the CSS class for Monochrome Pro's flexible widget areas. It counts the number of widgets in a flex widget area and assigns the appropriate class to it.

    If you edit front-page.php, you can remove the flexible-widgets class and the call to the monochrome_widget_area_class function and replace them with your own classes.

    You'd have to create your own CSS classes to provide the primary column layout, and adjust as necessary for mobile responsiveness in the media queries. It could require a few hours worth of work to get things working right. That's a little more than we can help you with as unpaid community volunteers. If you are not well versed in CSS, you may want to consider hiring a dev for a few hours.

    Regards,

    Victor
    https://victorfont.com/
    Call us toll free: 844-VIC-FONT (842-3668)
    Have you requested your free website audit yet?

    February 5, 2019 at 7:34 pm #489326
    doubler59
    Member

    Hi Victor,

    Thank you for the info you provided. I was able to work with it and accomplish my goal.

    I removed the flexible-widgets class as you suggested, then added a "container" div to the "front-page-2" widget area, to hold 4 widgets. I styled that using CSS Grid, which is new to me. Thanks to Brad Dalton's widget columns tutorial for helping me with that process!

    I'll post a link when the site is done.

    Best,

    Robin

  • Author
    Posts
Viewing 3 posts - 1 through 3 (of 3 total)
  • The topic ‘how to Modify Flexible Widgets to display 2 uneven columns – Monochrome Pro’ is closed to new replies.