enews widget before header styling

[masonjarsalads]

Hi there, will someone tell me how I can get the text, email address box and submit button inline properly. I am using the enews widget before the header.

Thank you, thank you!

http://www.masonjarsalads.com/

http://www.masonjarsalads.com/

[Davinder Singh Kainth]

I guess you got that working. If still issue, update thread.

---

Sunshine PRO genesis theme
Need Genesis help? Davinder @ iGuiding Media | My Blog | Fresh Genesis Themes

[masonjarsalads]

No, I haven't figured it out. I want the text to be closer to the email address box and the entire thing to be centered. There also needs to be a little more space between the address box and the submit button.

Thanks.

[Davinder Singh Kainth]

For space between address box and submit button. Look for following code;

.before-header .enews-widget input {
	border: 0;
	display: inline;
	float: center;
	margin: 0;
	width: 30%;
}

Change this to...

.before-header .enews-widget input {
	border: 0;
	display: inline;
	float: center;
	margin: 0 10px 0 0;
	width: 30%;
}

---

Sunshine PRO genesis theme
Need Genesis help? Davinder @ iGuiding Media | My Blog | Fresh Genesis Themes

[Davinder Singh Kainth]

For center align things a little more.

Change

.before-header .enews-widget .widgettitle {
	font-size: 20px;
}

to

`.before-header .enews-widget .widgettitle {
font-size: 20px;
width: 40%;
}

---

Sunshine PRO genesis theme
Need Genesis help? Davinder @ iGuiding Media | My Blog | Fresh Genesis Themes

[masonjarsalads]

Thanks David, how can I reduce the space between the text "want fresh new recipes" and the email address box?

Appreciate it,

Nicole

[Davinder Singh Kainth]

One way is this...

Change following code

before-header .enews-widget .widgettitle {
    font-size: 20px;
    width: 40%;
}

to...

before-header .enews-widget .widgettitle {
    font-size: 20px;
    width: 40%;
    text-align: right;
}

---

Sunshine PRO genesis theme
Need Genesis help? Davinder @ iGuiding Media | My Blog | Fresh Genesis Themes

[Davinder Singh Kainth]

Second way... to make whole thing more compact. Don't do above change, if you want to follow this method.

Change

.enews-widget {
    background: #f5f5f5;
    color: #010101;
    text-align: center;
}

to...

.enews-widget {
    background: #f5f5f5;
    color: #010101;
    text-align: center;
    width: 50%;
}

Also, remember to change width to 100% for smaller views tablet and mobile.

---

Sunshine PRO genesis theme
Need Genesis help? Davinder @ iGuiding Media | My Blog | Fresh Genesis Themes

[masonjarsalads]

Thanks, I used the first way and changed the email box and input to float left...do I have to make adjustments for mobile in that case too?

[masonjarsalads]

Now the text is to the right on mobile devices...

[Davinder Singh Kainth]

To fix text on mobile.

Change this code

	.before-header .enews-widget .widgettitle,
	.before-header .enews-widget p,
	.before-header .enews-widget #subscribe,
	.before-header .enews-widget input,
	.before-header .enews-widget input[type="submit"] {
		display: block;
		float: none;
		margin: 0 0 10px;
		width: 100%;
	}

to....

	.before-header .enews-widget .widgettitle,
	.before-header .enews-widget p,
	.before-header .enews-widget #subscribe,
	.before-header .enews-widget input,
	.before-header .enews-widget input[type="submit"] {
		display: block;
		float: none;
		margin: 0 0 10px;
		width: 100%;
                text-align: center;
	}

---

Sunshine PRO genesis theme
Need Genesis help? Davinder @ iGuiding Media | My Blog | Fresh Genesis Themes

[masonjarsalads]

Awesome, thank you David. That worked.

[Davinder Singh Kainth]

Welcome!

---

Sunshine PRO genesis theme
Need Genesis help? Davinder @ iGuiding Media | My Blog | Fresh Genesis Themes

[Author]

Posts