Support » Plugin: Genesis Widget Column Classes » 2 Widgets in 2 Columns in Sidebar?

  • Resolved mealto

    (@mealto)


    Not sure if I am understanding this plugin correctly. Am I correct in thinking that this plugin will allow 2 widgets to be placed side-by-side in the sidebar? I am choosing One-Half and getting the first widget half the width of the sidebar (left side). How do I load the 2nd one on the right hand side?

    https://wordpress.org/plugins/genesis-widget-column-classes/

Viewing 13 replies - 1 through 13 (of 13 total)
  • mealto

    (@mealto)

    Odd, I chose one of the 2 widgets as one-third and then back to one-hald for both and now they are placed side by side. That is great.

    One last thing. I placed a tall image in the First widget but the image is resized down. How do I keep the original image size inside this text widget?

    Thanks again!

    Plugin Author Jory Hogeveen

    (@keraweb)

    Hi!

    Seems you’ve already fixed your first question yourself.
    Please make sure you always save the changes before checking the page + always clear the cache (widgets to not trigger cache removal for plugins like WP Super Cache).

    As for the last question. You should check your theme CSS for this.
    This plugin only adds the column classes, nothing more.
    Most themes made their CSS responsive so images are sized down to the with of your widget.
    If you have a link I could take a look!

    mealto

    (@mealto)

    ok, after some testing, I got the 2 column widgets to work. The only thing I am trying to fix now is that after the 2nd widget (I am using one-hald to run 2 columns), there is no “gap’ between it and the next widget. It looks like the 2 column’ed widgets are flowing into the next widget. Normally in my sidebar, there are margins between each. After the 2nd columned widget, this gap is no longer existing. I have moved the columned widgets in various places in the sidebar and it seems the widget just after it no longer has “gaps”. Any ideas?

    Plugin Author Jory Hogeveen

    (@keraweb)

    Do you have a link that I can view?
    I’m pretty sure this is a CSS issue. The default Genesis (bootstrap) columns add a margin-left to all column classes.

    Please also note that if you want to have 2 equal with widgets side by side (one-half), they both need to have the one-half class:

    Widget 1: one-half + first
    Widget 2: one-half

    mealto

    (@mealto)

    Yes, that is how I have it set up. The site is in private dev mode so I cannot share a URL yet. Let me dig around and see if I can resolve this CSS issue. Thanks, this is a great plugin.

    mealto

    (@mealto)

    Darn lag. Double post. Disregard this one.

    mealto

    (@mealto)

    Wanted to post more info just in case it may help with the troubleshooting. It seems there is a missing ul or il at the end of the columned widgets. That’s why the CSS is not including the space blocks before the next widget. Is that even possible?

    Plugin Author Jory Hogeveen

    (@keraweb)

    That is certainly possible.
    Though I can hardly imagine this could be an issue made with this plugin, still I’d like to be sure:

    • If you disable this plugin, does it still happen?
    • Which widget are you using?
    mealto

    (@mealto)

    Thanks for the prompt resposne. I am not exactly sure either and it’s unfortuante I cannot get you a log in at this point in time. But here is what I have done:

    1. When I disable this plugin, the 2 widgets that I had placed side by side do indeed show the separation between all widgets.

    2. When I enable this plugin again, the widget below the 2 columned widget gets merged into the spacing of one entire widget.

    3. I am using a text widget with Genesis Sandbox.

    Although this does not show causation, it does show that the problem goes away when I disable this plugin. It may just be how my particular Gensis Theme was coded in the first place.

    Just did osme testing and found that the widget just below the 2 columend ones are also getting split into half of the sidebar. Looks like I was correct in thinking that the widgets are somehow getting merged without a closing tag somewhere.

    Although not aesthetically correct, I will still run this plugin to get that side by side widget. It’s pretty fantastic to be able to do this without hard coding anything.

    Nicely done. If you have any other things for me to try, let me know. I would be happy to run a couple of things on my end since I cannot get your access. I would love to try and resolve this issue if possible.

    Thanks Jory!

    Plugin Author Jory Hogeveen

    (@keraweb)

    Hmm, very strange that my plugin has any effect on the source code other than adding css classes (it literally doesn’t do anything else).
    If/When you have any source code I can check, please let me know, I’m very curious as to what could be causing this.

    Btw, are you checking the source code in the console of (for example) Chrome?

    Anyhow, one thing you could try is the following (I’ll add some explanation).

    CSS blabering:
    Column classes add a float css propert (float: left;).
    A float property causes the next element to be “floated” next to it (right or left, dependent on the float value).
    This could cause your 3rd widget to behave strange if the 2 column widgets aren’t occupying the full with of the container.

    The first class also adds the clear: both; css property which eliminates effects from previous “floated” sibling elements.
    This class should be used for every first element in a row to make sure it’s put in a new “row”.

    Possible solution:
    You could try to only check the first on the first widget that should be full-width after the column widgets. Do not set a class, only check the “first” class! (this is possible since v1.1.2 so make sure you have the latest version).

    Let me know if this helps!

    mealto

    (@mealto)

    ok, I tried various CSS combinations to make sure the 2 column widgets take up the full space but could not resolve the issue.

    Then your comment about how the CSS got me thinking (This class should be used for every first element in a row to make sure it’s put in a new “row”.). I ended up doing exactly what you suggested before I read it and sure enough, the “3rd” widget below the 2 columns are now fixed if I choose First for the widget that was being wrapped underneath the 2 column widgets.

    Initially, I just added an dummy text widget with   it as the overflow widget. Your Possible solution did fix this issue. Thanks again.

    I wonder what code in my theme that could be causing this. Interesting.

    Plugin Author Jory Hogeveen

    (@keraweb)

    Glad to hear it fixed your issue.
    If you would like to share a link when it’s ready I would gladly take a look at the CSS.
    As for the width of the 2 column widgets.
    Did you assign the “one-half” class to both widgets and only assigned the “first” class to the first widget?

    So you’ll have:

    - Widget 1 >> one-half + first
    - Widget 2 >> one-half
    - Widget 3 >> first (new row)

    Just asking to be sure 🙂

    For now I will mark this issue as resolved. If you find anything else you can reopen this issue (if it’s related) or make a new one.
    Also, if you would like to take the time to write a review for this plugin that would be great!

    mealto

    (@mealto)

    Thanks. And yes, that is how I have set things up. Let me work on the roll out. If I am still here when the site goes live, I will come back and share a URL with you.

    Thanks again!

Viewing 13 replies - 1 through 13 (of 13 total)
  • The topic ‘2 Widgets in 2 Columns in Sidebar?’ is closed to new replies.