Set fixed height for homepage widgets.

Hi sonrisenewnan,

It’s most likely a CSS issue. If it isn’t too much trouble, would you mind posting a link to the site in question? That way I (or others) could take a look and recommend a fix. =P

Jeremy

Jeremy, sorry the link wasn’t showing up for some reason but it’s in my original post now. Thanks.

Thanks sonrise. That helped. It was able to make the modification to the widgets’ height using css. However, I want to confirm the end result is what you are looking for.

All I did was change the background of the widget area. This gives the appearance of an “enclosed” area that is uniform with other widgets. I want to be sure the effect is what you are looking for.

Can you take a look here? sonrise

I used the height of the far right widget as the one to use for the others. As you can see, the left and middle widget have more white space towards the bottom. This is because there is less content. This is an issue you’ll have if you use fixed height widgets.

Is this the look you were going for?

Yes thanks. What code would I add to my child theme’s CSS to do that? Will this only affect the home page widgets?

In your .css find the .resurrect-home-widget class.

Its code is:

.resurrect-home-widget {
    width: 30.2%;
    box-sizing: border-box;

You’ll want to add

height: 350px;

That will extend the white background areas that make the widgets look like they are enclosed in boxes.

If that doesn’t work, you may have to use:

height:350px!important;

That should do the trick.

Could I add this to the child theme? So far I’ve only added one thing to it. This is all that’s in my child theme right now:

/*
 Theme Name:     Resurrect Child
 Theme URI:      https://sonrisebaptist.org/newsite/wp-contect/themes/resurrect-child/
 Description:    Resurrect Child Theme
 Author:         Matt Riggs
 Author URI:     https://example.com
 Template:       resurrect
 Version:        1.0.0
*/

@import url("../resurrect/style.css");

span.wpcf7-list-item { display: block; }
<!--The above code causes the checkboxes of Contact Form 7 to display as individual lines rather than all next to each other across one line-->

Yes, ideally you’d want to just add the change to the child theme’s css via the edit, or through a custom css plugin (if the theme doesn’t already have one).

I just visited the site. It looks like you got it working. Grats!

The site is coming along nicely, wish you all the luck with it.

Thanks so much for your help!!

This solution presented by Harmony Webworks has been working great (thanks!) except when the content exceeds what will fit in the defined fixed area of 280px height. Then it just runs beyond the fixed area to cover up the footer.

How can I make it stay in the 280px box? Should I add a scroll bar and if so how?

UPDATE:
I tried adding overflow:auto and it does make the scroll bar appear and properly contains the text. However, now the title of each section is getting cut off.

This is from my child theme. The overflow:auto may or may not be active when you view as I’m working on it…

/************** HOMEPAGE WIDGETS **************/

#resurrect-home-bottom-widgets {
	margin: -30px -3.3% 0 0; /* compensate for individual top widget margins + margin between columns*/
	border-top: 1px solid transparent; /* hack to fix top margin */
}

	/* Container Adjustment */

	.resurrect-home-widget { /* .resurrect-widget */
		width: 30.2%;
		-webkit-box-sizing:	border-box;
		-moz-box-sizing:	border-box;
		box-sizing:		border-box;
		height: 280px;
		overflow:auto
	}