eNews Extended on Outreach

[Paul]

I'm having trouble getting the eNews Extended widget to display nicely. I didn't have any trouble actually configuring it with MailChimp, but it doesn't look very nice right now.

Anyone have any ideas or tips for customizing the look to make it look better somehow?

http://heartlandestatesalesflorida.com/

---

Grace and Peace,
Paul

http://heartlandestatesalesflorida.com/

[Tony @ AlphaBlossom]

Hi,

Around line 1307 of your theme's style.css file, replace this:

.enews #subbox {
    border: medium none;
    border-radius: 5px 0 0 5px;
    color: #AAAAAA;
    font-style: italic;
    margin: 0 -7px 0 0;
    padding: 13px 15px 12px;
    width: 160px;
}

with this:

.enews #subbox, 
.enews .enews-subbox {
	border: medium none;
	color: #AAAAAA;
	font-style: italic;
	padding: 13px 15px 12px;
}

.enews .enews-subbox {
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	margin: 0 0 10px 0;
	width: 212px;
}

.enews #subbox {
	-webkit-border-radius: 5px 0 0 5px;
	-moz-border-radius: 5px 0 0 5px;
	border-radius: 5px 0 0 5px;
	margin: 0 -7px 0 0;
	width: 160px;
}

You can play with the numbers, but that should get you going.

Have a great day,
Tony

---

Tony Eppright | http://www.AlphaBlossom.com | Follow me on twitter @_alphablossom

[Paul]

Thanks Tony! That looks a lot better!

---

Grace and Peace,
Paul

[Tony @ AlphaBlossom]

Awesome, glad I could help!

---

Tony Eppright | http://www.AlphaBlossom.com | Follow me on twitter @_alphablossom

[Paul]

Tony, do you, or anyone else, have any ideas for the mobile display of the enews extended widget?

---

Grace and Peace,
Paul

[Tony @ AlphaBlossom]

Hi Paul,

Sure...I would switch to %. The easiest way is to add this code to your media query for the size you want to target (480px?):

.enews .enews-subbox,
.enews #subbox,
#subscribe input[type="submit"] {
    width: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    float: left;
}

.enews #subbox {
    margin: 0;
    width: 75%;
}

#subscribe input[type="submit"] {
    width: 25%;
}

That will make the enews widget full width inside its container below whatever resolution you choose.

Let me know if you have any problems or questions. Have a great night!

Tony

---

Tony Eppright | http://www.AlphaBlossom.com | Follow me on twitter @_alphablossom

[Author]

Posts