Adjusting Home Page Widget Height

[gigtime]

Hi,

I want to change the height of a Home Page widget which has too much extra space above and below the text. I tried adding a max-height limitation to the first section of the CSS. It brought the height down but further adjustment is needed as the text didn't 'adjust' to the change and remained in what would have been the center without the limitation.

The site is built on the Boss Pro theme: It's Front Page Widget 2 where you see the quote on a black background.

This is the CSS for that widget:

/* Front Page 2
 * ========================================================================== */

.front-page-2 {
	background: #000;
	color: #fff;
	text-align: center;
}

.front-page-2 .flexible-widgets.widget-full .widget {
	max-width: calc(740px + 10%);
	margin: 0 auto;
	float: none;
	}

.front-page-2 .widget_text {
	border: 1px solid #fff;
	position: relative;
	padding: 5% 5% 7%;
}

.front-page-2 .widget_text:before,
.front-page-2 .widget_text:after {
	content: "";
	background: #000;
	position: absolute;
	display: block;
	right: 10%;
	left: 10%;
	height: 1px;
}

.front-page-2 .widget_text:before {
	top: -1px;
}

.front-page-2 .widget_text:after {
	bottom: -1px;
}

.front-page-2 .widget_text .widgettitle {
	position: absolute;
	bottom: -1em;
	margin: 0;
	height: 2em;
	max-width: 80%;
	z-index: 2;
	left: 10%;
	right: 10%;
}

Thanks in advance for any help.

http://austinmicroendo.111659.com/

[William]

Please try something along these lines:

.front-page-2.flexible-widget-area > .wrap {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

Adjust the "0" + % to match your desired padding.

🙂

---

Genesis Customization Service | Quick fixes whenever you need them ! | Contact me at Fixmysite.com !

[gigtime]

Thanks, William. That code works great if I want to add padding. The problem is I'm trying to reduce it. And using a negative percentage like say...

.front-page-2.flexible-widget-area > .wrap {
    padding-top: -20% !important;
    padding-bottom: -20% !important;
}

...has zero effect on the padding.

Any other suggestions?

[William]

My code snippet works just fine 🙂

Set the padding-top & padding-bottom to 0.

No negative percentages.

---

Genesis Customization Service | Quick fixes whenever you need them ! | Contact me at Fixmysite.com !

[gigtime]

Hi William,

I added the snippet to the end of the front page two code in style.css. Leaving it at 0 doesn't reduce the padding. I can try working with percentages and make the section larger but nothing I do reduces it below the current padding so either I'm placing the code in the wrong place or some other piece of code is overriding this code below a certain point. It's driving me nuts because I need to reduce this in several sections.

[gigtime]

This is the space I'm trying to reduce. I'm inspecting code and can't find anything overall that controls padding for all the sections except this:

.flexible-widget-area > .wrap {
	padding-top: 80px;
	padding-bottom: 80px;

}

But changing those padding numbers doesn't seem to have any effect.

Anyone have any suggestions?

[gigtime]

Found a solution elsewhere. If anyone is looking this dealing with this same issue, here's what I used to fix it. Adjust as needed for yours. And if you're using that theme, you're very likely to need to adjust the height in multiple sections on the home page.

.front-page-2 > .wrap,
.front-page-3 > .wrap,
.front-page-4 > .wrap,
.front-page-5 > .wrap,
.front-page-7 > .wrap {
padding-top: 20px;
padding-bottom: 20px;
display: table;
width: 100%;
min-height: 50vh;
}

.front-page-1 > .wrap {
padding-top: 20px;
padding-bottom: 20px;
display: table;
width: 100%;
min-height: 100vh;
}

.flexible-widget-area > .wrap {
padding-top: 5px;
padding-bottom: 5px;

[Author]

Posts