Set fixed height for homepage widgets. (11 posts)

  1. sonrisenewnan
    Posted 1 year ago #

    My homepage widgets are resizing based on content. How can I keep them at a fixed height so they all line up? I'm already working in a child theme and have tried adding code but nothing has worked yet. I can normally edit existing code to make it work for me but I'm not good at adding code from scratch. Thanks!


  2. Harmony Webworks
    Posted 1 year ago #

    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


  3. sonrisenewnan
    Posted 1 year ago #

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

  4. Harmony Webworks
    Posted 1 year ago #

    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?

  5. sonrisenewnan
    Posted 1 year ago #

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

  6. Harmony Webworks
    Posted 1 year ago #

    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:


    That should do the trick.

  7. sonrisenewnan
    Posted 1 year ago #

    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:      http://sonrisebaptist.org/newsite/wp-contect/themes/resurrect-child/
     Description:    Resurrect Child Theme
     Author:         Matt Riggs
     Author URI:     http://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-->
  8. Harmony Webworks
    Posted 1 year ago #

    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).

  9. Harmony Webworks
    Posted 1 year ago #

    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.

  10. sonrisenewnan
    Posted 1 year ago #

    Thanks so much for your help!!

  11. sonrisenewnan
    Posted 10 months ago #

    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?

    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;

Topic Closed

This topic has been closed to new replies.

About this Topic