Auto scroll bar blocking widget title

Hey there sonrisenewnan,

Hope you’re well today!

You should be able to fix this with some custom CSS. Please try adding the following CSS code in the style.css file of your child theme or if your theme doesn’t have custom CSS tab add it in your site using the following plugin:

https://www.ads-software.com/plugins/simple-custom-css

.resurrect-widget-has-title > * {
top: -8px;
}

This should move titles slightly bottom so they are visible. Please let me know if this helps ??

Best regards,
Bojan

Thanks Bojan. I removed the scroll bar code so you can see how the title is supposed to look. It actually needs to go up not down. Now you’ll notice the original problem, the Facebook content goes below the widget area.

This is a pic with the code overflow:auto.
https://tinypic.com/view.php?pic=2s1vdw7&s=8#.VOIfeChqLFU

Thanks!

Hey there sonrisenewnan,

Thank you for the clarification. Could you please try replacing your code for scroll with this one:

#text-3 .textwidget.resurrect-widget-first-element {
overflow-y: scroll;
height: 250px;
}

section#text-3 {
padding-right: 0;
}

This should be the result https://screencast.com/t/f41qkkmqu5Gz.

Hope this helps ??

Best regards,
Bojan

Bojan,

Thanks for the help. I added that code but it didn’t make any change to the layout. Still looks the same. Do I need to delete something else?

Here’s the widget portion of the child theme .css:

/************** 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;
		#text-3 .textwidget.resurrect-widget-first-element {
		overflow-y: scroll;
		height: 250px;
		}

		section#text-3 {
		padding-right: 0;
		}

	}

Thanks.

Hey there sonrisenewnan,

From the code you pasted I can assume that you’re editing original style.css. I strongly suggest not doing that since all changes will be lost once you update the theme.

You should either use child theme and add the code at the bottom of your child theme style.css or use the plugin I mentioned above and simply add the code in Appearance >> Custom CSS once the plugin is installed and activated.

I think you’re not targeting the correct class in style.css which is making the code not to work properly. What I did is simply add the scroll to the content element inside that specific widget rather then the whole widget which is leaving the heading the same as before.

Hope this makes sense ??

Best regards,
Bojan

Thanks again for your help! I am using a child theme for changes. You can see where I posted your code within the child theme.

I’m using the * Container Adjustment * to constrain all 3 home bottom widgets to 280px high regardless of content. Without this, they will resize based on content.

Matt

/*
 Theme Name:     Resurrect Child
 Theme URI:      https://sonrisebaptist.org/newsite/wp-contect/themes/resurrect-child/
 Description:    Resurrect Child Theme
 Author:
 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-->

/************** 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;
		#text-3 .textwidget.resurrect-widget-first-element {
		overflow-y: scroll;
		height: 250px;
		}

		section#text-3 {
		padding-right: 0;
		}

	}

You’ve forgotten the closing bracket for the .resurrect-home-widget section, which is causing parsing errors down the rest of your child theme’s stylesheet. It looks like it should go right after height: 280px;, on line 31 of your child theme’s stylesheet.

Stephencottontail, you are right. That fixed it!

Is it possible to change the color of that widget’s scrollbar to blend better with the site? Maybe a gray color.

Thanks,
Matt

Apparently, yes, although it doesn’t work on Firefox. Check out https://codemug.com/html/custom-scrollbars-using-css/ for more information.