Genesis - How to change width of newsletter fields

If a theme demo displays 3 fields (First Name, Last Name, and Email Address) in the Genesis eNews Extended widget — and you only want to display 2 fields (First Name and Email Address) — your subscription box will appear "off center." In this tutorial, we'll show you how to modify the width of the Genesis eNews signup forms.

Display First Name + Email Only

1. Go to Appearance > Customize > Additional CSS.

2. Paste the code snippet in the box:

@media only screen and (min-width: 768px) {
    .home-area .enews-widget input#subbox,
    .home-area .enews-widget input#subbox1,
    .after-entry .enews-widget input#subbox,
    .after-entry .enews-widget input#subbox1 {
        width: 39%;
    }
}

3. You can see how the new width looks right in the preview on the right. If the width doesn't look right for your theme, adjust the 39% value to whatever you need. Lower number = smaller width. Higher number = larger width.

4. Click Publish to save.

Display Email Only

1. Go to Appearance > Customize > Additional CSS.

2. Paste the code snippet in the box:

@media only screen and (min-width: 768px) {
    .home-area .enews-widget input#subbox,
    .after-entry .enews-widget input#subbox {
        width: 80%;
    }
}

3. You can see how the new width looks right in the preview on the right. If the width doesn't look right for your theme, adjust the 80% value to whatever you need. Lower number = smaller width. Higher number = larger width.

4. Click  Publish to save.

Display First Name, Last Name, + Email

Only applies to themes that only display 2 fields, and you want to display 3.

1. Go to Appearance > Customize > Additional CSS.

2. Paste the code snippet in the box:

@media only screen and (min-width: 768px) {
    .home-area .enews-widget input#subbox,
    .home-area .enews-widget input#subbox1,
    .home-area .enews-widget input#subbox2,
    .after-entry .enews-widget input#subbox,
    .after-entry .enews-widget input#subbox1
    .after-entry .enews-widget input#subbox2 {
        width: 15%;
    }
}

3. You can see how the new width looks right in the preview on the right. If the width doesn't look right for your theme, adjust the 15% value to whatever you need. Lower number = smaller width. Higher number = larger width.

4. Click Publish to save.