Skip to content

Instantly share code, notes, and snippets.

@topleague
Last active June 12, 2017 09:46
Show Gist options
  • Save topleague/c05df03f6b0abd6a751ed2967fbee114 to your computer and use it in GitHub Desktop.
Save topleague/c05df03f6b0abd6a751ed2967fbee114 to your computer and use it in GitHub Desktop.
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