Genesis eNews Extended not displaying properly

[allieb]

I am installing Genesis eNEWS Extended in a sidebar on the Genesis Parallax Pro Theme. The form is not displaying correctly: the name, email and submit boxes and aligned to the right, they are shortened and they are stacked awkwardly.

The eNews Extended plugin looks so nice when it is working properly - what is needed to correct this?

Thank you

https://www.navigatedivorceguide.com/sign-up/

[Victor Font]

You have a lot of custom CSS to turn the eNews widget into a horizontal opt-in form that has been added to your theme. This is the cause of the issues. This CSS is not delivered with Parallax Pro. It was added by someone or something.

/* ## Horizontal Opt-in Form
--------------------------------------------- */

.horizontal-opt-in {
	padding: 20px 0;
	background-color: #717888;
}

.enews-widget {
	color: #fff;
}

.enews-widget p {
	float: left;
	width: 40%;
	margin-top: 12px;
	margin-bottom: 0;
	font-weight: bold;
	text-align: center;
	text-transform: uppercase;
	font-size: 18px;
}

#subscribe {
	float: right;
	width: 60%;
}

.enews-widget input {
	float: left;
	width: 35%;
	margin-right: 10px;
	margin-bottom: 0;
	padding: 10px;
	border: 1px solid #38aa9a;
	color: #222;
}

.enews-widget input[type="submit"] {
	width: auto;
	padding: 12px 34px;
	background-color: #222;
	margin-right: 0;
	color: #fff;
}

.enews-widget input[type="submit"]:hover {
	background-color: #000;
}

@media only screen and (max-width: 1140px) {
	.enews-widget p {
		font-size: 15px;
		text-align: left;
		margin-top: 14px;
	}

	.enews-widget input {
		width: 30%;
	}
}

@media only screen and (max-width: 960px) {
	.enews-widget p {
		float: none;
		width: 100%;
		margin-bottom: 20px;
		text-align: center;
		font-size: 18px;
	}

	#subscribe {
		float: none;
		width: 100%;
	}

	.enews-widget input {
		width: 100%;
		margin-bottom: 20px;
	}

	.enews-widget input[type="submit"] {
		float: none;
		width: 100%;
	}
}

#subscribeenews-ext-8 {
	overflow: hidden;
}

@media only screen and (max-width: 1024px) {

	.home-section-1 {
		background-size: cover;
		background-position: left top !important;
	}

}

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[allieb]

Thank you, that explains everything.
I have a horizontal opt-in form on the homepage, so, with my limited coding ability, I probably will have to use the plugin for either the horizontal form or the sidebar form. Or, is there simple a way to program two different sizes and shapes for the use of the Genesis eNews Extended plugin?

[Victor Font]

Yes, you can use CSS to display vertical in one place and horizontal in another. You have to find a class that is unique to each area and pre-pend to the CSS. In general terms, you can usually find the unique class in the page's body tag. For example, your sign-up form has page-id-130 as a class in the body tag. You can use .page-id-130 .enews-widget for the classes on the sign-up page. And likewise use .parallax-home .enews-widget for the home page.

BTW, your site has broken HTML. It looks like you might have an extra closing script tag in your Google Analytics code.

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[Author]

Posts