Balanace Theme Home feature column

[choikh]

I am using balance theme and I want to add a eNew Extend Widget to the location Home Feature Right.

However, it ends up with wired input box...

How should I change the code to make it to a better look?

My site here

/* Home Featured
------------------------------------------------------------ */

#home-featured {
 background: url(images/gray-texture.jpg);
 margin: 0 0 60px;
}

#home-featured .wrap {
 padding: 35px 0;
}

.home-featured-left {
 float: left;
 width: 480px;
}

.home-featured-left,
.home-featured-left p {
 color: #888;
 font-size: 14px;
 text-shadow: #fff 1px 1px;
}

.home-featured-left h4.widgettitle {
 font-size: 26px;
 margin-bottom: 20px;
}

.home-featured-right {
 background: url(images/dashes-bg.png) #d05353;
 border: 5px solid #fff;
 float: right;
 font-size: 16px;
 margin: -50px 0;
 width: 430px;
}

.home-featured-right,
.home-featured-right p,
.home-featured-right h4.widgettitle {
 color: #fff;
 text-shadow: #a64242 -1px -1px;
 text-align: center;
}

.home-featured-right p {
 font-size: 16px;
 margin-bottom: 20px;
}

.home-featured-right .widget {
 margin: 35px;
}

.home-featured-right h4.widgettitle {
 font-size: 26px;
 margin-bottom: 20px;
}

.home-featured-right input[type=text] {
 -moz-box-shadow: inset 0 1px 2px 1px #eee;
 -webkit-box-shadow: inset 0 1px 2px 1px #eee;
 background: #fff url(images/email-icon.png) no-repeat 16px 15px;
 border-bottom: none;
 border-left: 1px solid #963c3c;
 border-right: none;
 border-top: 1px solid #963c3c;
 box-shadow: inset 0 1px 1px 1px #eee;
 color: #bbb;
 font-family: Verdana, Arial, Tahoma, sans-serif;
 font-size: 9px;
 padding: 14px 15px 14px 45px;
 text-transform: uppercase;
 width: 180px;
}

#home-featured .home-featured-right input[type=submit] {
 background: url(images/email-button.png) no-repeat !important;
 border: none;
 font-size: 0;
 height: 28px;
 margin: 0 0 0 15px;
 line-height: 0;
 text-indent: -9999px;
 width: 26px;
}

/* eNews and Update Widget
------------------------------------------------------------ */

.enews-widget {
 background: url(images/dashes-bg.png) #d05353 !important;
 border-bottom: none !important;
 color: #fff;
 font-size: 16px;
 text-align: center;
}

.home #sidebar .enews,
.home #sidebar .enews-widget {
 display: none;
}

#sidebar .enews {
 padding: 20px 20px 0;
}

#footer-widgets .enews {
 padding: 20px;
}

.enews p {
 color: #fff !important;
 font-size: 16px;
 padding: 0;
 text-align: center;
 text-shadow: #a64242 -1px -1px;
}

.enews #subscribe {
 padding: 0;
}

.enews #subbox {
 -moz-box-shadow: inset 0 1px 2px 1px #eee;
 -webkit-box-shadow: inset 0 1px 2px 1px #eee;
 background: url(images/email-icon.png) no-repeat 16px 15px #fff;
 border-bottom: none;
 border-left: 1px solid #963c3c;
 border-right: none;
 border-top: 1px solid #963c3c;
 box-shadow: inset 0 1px 1px 1px #eee;
 color: #bbb;
 font-family: Verdana, Arial, Tahoma, sans-serif;
 font-size: 9px;
 padding: 14px 15px 14px 45px;
 width: 160px;
 text-transform: none;
}

.enews #subbox1 {
 -moz-box-shadow: inset 0 1px 2px 1px #eee;
 -webkit-box-shadow: inset 0 1px 2px 1px #eee;
 background: url(images/name.png) no-repeat 16px 15px #fff;
 border-bottom: none;
 border-left: 1px solid #963c3c;
 border-right: none;
 border-top: 1px solid #963c3c;
 box-shadow: inset 0 1px 1px 1px #eee;
 color: #bbb;
 font-family: Verdana, Arial, Tahoma, sans-serif;
 font-size: 9px;
 padding: 14px 15px 14px 45px;
 width: 160px;
 text-transform: none;
}

.enews h4.widgettitle {
 color: #fff;
 font-family: Georgia, "Times New Roman", Times;
 font-size: 26px;
 font-weight: normal;
 margin-bottom: 20px;
 text-align: center;
 text-shadow: #a64242 -1px -1px;
 text-transform: none;
}

#subbutton {
 background: #fff;
 color: #555;
 margin-top: 15px;
 text-shadow: #fff 1px 1px;
}

[David Chu]

Hi,
Mandarin - wow! You could try this CSS code:

.home-featured-right .enews #subscribe {
  padding: 0 0 0 50px;
  text-align: left;
}

Dave

---

Dave Chu · Custom WordPress Developer – likes collaborating with Designers

[choikh]

this is not working

[Kraft]

Have you been able to resolve this? It looks good to me, but my sense of design isn't great. 🙂

---

Brandon Kraft
Volunteer
Blog | Twitter
Genesis eNews Extended Support

[choikh]

I have make it work on screen wider than it can display for both featured left and right.

for a smaller screen, or mobile. It still sucks. 🙁

[Kraft]

Can you be more exact on what sucks? I could suggest some changes but don't want to waste your time.

---

Brandon Kraft
Volunteer
Blog | Twitter
Genesis eNews Extended Support

[choikh]

I just want to make the two entrie box the same length when view in iphone

[Kraft]

On line 2248 of your style.css, you'll see

.enews #subbox, .s {

change that to

.enews #subbox, .enews #subbox1, .s {

---

Brandon Kraft
Volunteer
Blog | Twitter
Genesis eNews Extended Support

[choikh]

It now ok 🙂

Thanks!

[Author]

Posts