[Resolved] Equal length columns

[Larry]

Okay, got it.
I used this css

.sidebar .widget {
margin-bottom: 0;
padding-bottom: 0;
}

from this thread https://generatepress.com/forums/topic/widget-spacing/

[Tom]

Awesome, glad you figured it out. Thanks for sharing the solution 🙂

[Doug]

Hi,

Sorry to jump on this thread again, but I’m having similar issues with a site I’m working on. The code works fine on the home page where the content would normally be shorter than the sidebar, but on a page where the reverse is true the sidebar isn’t aligning with the content.

Working homepage: http://cccbrdev.kcacrpublicity.org.uk

Not working other page: http://cccbrdev.kcacrpublicity.org.uk/what-is-bell-ringing/

Any help or advice appreciated.

Thanks,
Doug.

[Tom]

Hi Doug,

Unfortunately it won’t work this way – the sidebar needs to have a solid color in order to match the longer content.

For it to work with your setup, that last widget would have to increase in height to match, which isn’t possible.

[Birgit]

Hello all,

I would like to know if it is possible to have equal length columns (content and sidebar) on my site http://www.bluemonty.de. I tried this: https://gist.github.com/generatepress/b946892d810435352fd9 but it doesn’t work. When I choose the option “One Container”, sidebar and content have the same length. But I want to have several containers with round corners and a little distance between the containers, just like at present.

Can anybody help me?

Best wishes from Birgit

[Tom]

The equal height columns script only works if both containers have a solid color.

If you want to re-add the script and let me know, I might be able to help out with some CSS.

[Birgit]

Hi Tom,

I just re-add the script and I would be very glad if you helped me.

Thank you so much
Birgit

[Tom]

You’ve added it to this site?: http://bluemonty.de/

I’m not seeing it anywhere.

[Birgit]

So sorry, Tom, it seems I didn’t save that hook. Now it is re-added and saved, really. 😉 And the widgets have no more rounded corners.

[Tom]

It’s not showing up for me yet – you might have to clear your cache inside your caching plugin.

[Birgit]

Cache is cleared now und cookies are deleted but it seems it’s still not showing up.

[Birgit]

Got the sidebar’s corners round now, looks great! Don’t need the distances between the widgets any more. Only the equal length is missing.

[Birgit]

Sorry, IE and Edge don’t show the rounded corners…

[Tom]

There we go 🙂

Now you need to add the background and border radius to the element with the height:

.site-main {
    background: #FFF;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

Border radius using CSS3, which IE isn’t cool enough to really recognize. EDGE should be though: http://caniuse.com/#feat=border-radius

[Birgit]

I hope I do not nerve but I got the round widget-corners now even in IE and Edge. I used this code:

background: #ffffff;
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#ffffff), to(#ffffff));
background: -webkit-linear-gradient(#ffffff, #ffffff);
background: -moz-linear-gradient(#ffffff, #ffffff);
background: -ms-linear-gradient(#ffffff, #ffffff);
background: -o-linear-gradient(#ffffff, #ffffff);
background: linear-gradient(#ffffff, #ffffff);
-pie-background: linear-gradient(#ffffff, #ffffff);

[Author]

Posts