Genesis eNews Horizontal & Mobile CSS Inside!

[Erika]

Hey guys! I'd like to share with you this great snippet of code I use for making the Genesis eNews plugin have a horizontal display on desktop view and then become mobile responsive. You will need to modify it based on your needs and where it is placed in your theme. Currently this code is structured for a First Name, Last Name and Email input box

Normal CSS for horizontal display:
.full-width-one .enews-widget {
background-color: #fff;
color: #000;
padding: 20px;
margin-top: -48px;
margin-bottom: 20px;
}

.full-width-one .enews-widget input[type="submit"] {
width: 10%;
height: 50px;
background-color: #000;
color: #fff;
}

.full-width-one .enews-widget input {
margin-bottom: 0px;
margin-top: 6px;
width: 17%;
}

.full-width-one .enews-widget p {
float: left;
width: 35%;
margin-top: 18px;
margin-bottom: 0;
text-align: center;
color: #000;
letter-spacing: 2px;
text-transform: uppercase;
}

@media only screen and (max-width: 1139px) {

.full-width-one .enews-widget p {
margin-top: 5px;
}

@media only screen and (max-width: 768px) {

.full-width-one .enews-widget p {
float: left;
width: 100%;
}

.full-width-one .enews-widget input {
width: 100%;
margin-bottom: 10px;
}

.full-width-one .enews-widget input[type="submit"] {
width: 100%;
height: 53px;
}

.full-width-one .enews-widget p {
float: left;
width: 100%;
}

@media only screen and (max-width: 480px) {

.full-width-one .enews-widget p {
width: 100%;
margin-bottom: 10px;
text-align: center;
}

.full-width-one .enews-widget input {
width: 100%;
margin-bottom: 10px;
}

.full-width-one .enews-widget input[type="submit"] {
width: 100%;
height: 53px;
}

[bluebird]

Thanks for sharing this Erika!

[Erika]

You're welcome 🙂

[Author]

Posts