Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
How to Design Newsletters Opt-in Form in Footer Widget in Genesis
/* Single Column Footer Widget + Newsletter Design */
.footer-widgets-1 {
width: 100%;
.enews-widget input {
font-size: 17px;
margin-bottom: 12px;
width: 400px;
background: transparent;
border-color: #fff;
padding: 16.4px 20px;
border-right: none;
color: #fff;
.enews-widget input[type="submit"] {
margin: 0;
padding: 0 20px;
height: 55px;
width: auto;
vertical-align: middle;
text-transform: uppercase;
letter-spacing: 1.11px;
border-radius: 0;
border: 1px solid #e6e6e6;
background-color: #fff;
color: #0f1c2a;
font-size: 14px;
margin-left: -4px;
font-weight: bold;
.enews-widget {
text-align: center;
.site-footer {
background-color: #fff;
.footer-widgets {
background-color: #333;
.footer-widgets .widget-title {
font-size: 25px!important;
text-align: center;
@media only screen and (max-width: 1023px) {
.enews-widget input { width: 100%; float: left; }
.enews-widget input[type="submit"] { margin-left: -64px; float: right; position: absolute;}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment