Community Forums › Forums › Archived Forums › Design Tips and Tricks › enews widget before header styling
Tagged: before header, eNews Widget
- This topic has 12 replies, 2 voices, and was last updated 7 years, 9 months ago by
Davinder Singh Kainth.
-
AuthorPosts
-
August 14, 2015 at 3:11 pm #162416
masonjarsalads
MemberHi there, will someone tell me how I can get the text, email address box and submit button inline properly. I am using the enews widget before the header.
Thank you, thank you!
http://www.masonjarsalads.com/
http://www.masonjarsalads.com/August 16, 2015 at 8:58 am #162514Davinder Singh Kainth
MemberI guess you got that working. If still issue, update thread.
Sunshine PRO genesis theme
Need Genesis help? Davinder @ iGuiding Media | My Blog | Fresh Genesis ThemesAugust 16, 2015 at 11:07 am #162536masonjarsalads
MemberNo, I haven't figured it out. I want the text to be closer to the email address box and the entire thing to be centered. There also needs to be a little more space between the address box and the submit button.
Thanks.
August 17, 2015 at 9:18 am #162615Davinder Singh Kainth
MemberFor space between address box and submit button. Look for following code;
.before-header .enews-widget input { border: 0; display: inline; float: center; margin: 0; width: 30%; }
Change this to...
.before-header .enews-widget input { border: 0; display: inline; float: center; margin: 0 10px 0 0; width: 30%; }
Sunshine PRO genesis theme
Need Genesis help? Davinder @ iGuiding Media | My Blog | Fresh Genesis ThemesAugust 17, 2015 at 9:22 am #162616Davinder Singh Kainth
MemberFor center align things a little more.
Change
.before-header .enews-widget .widgettitle { font-size: 20px; }
to
`.before-header .enews-widget .widgettitle {
font-size: 20px;
width: 40%;
}
Sunshine PRO genesis theme
Need Genesis help? Davinder @ iGuiding Media | My Blog | Fresh Genesis ThemesAugust 19, 2015 at 8:29 am #162833masonjarsalads
MemberThanks David, how can I reduce the space between the text "want fresh new recipes" and the email address box?
Appreciate it,
Nicole
August 19, 2015 at 9:18 am #162841Davinder Singh Kainth
MemberOne way is this...
Change following code
before-header .enews-widget .widgettitle { font-size: 20px; width: 40%; }
to...
before-header .enews-widget .widgettitle { font-size: 20px; width: 40%; text-align: right; }
Sunshine PRO genesis theme
Need Genesis help? Davinder @ iGuiding Media | My Blog | Fresh Genesis ThemesAugust 19, 2015 at 9:19 am #162843Davinder Singh Kainth
MemberSecond way... to make whole thing more compact. Don't do above change, if you want to follow this method.
Change
.enews-widget { background: #f5f5f5; color: #010101; text-align: center; }
to...
.enews-widget { background: #f5f5f5; color: #010101; text-align: center; width: 50%; }
Also, remember to change width to 100% for smaller views tablet and mobile.
Sunshine PRO genesis theme
Need Genesis help? Davinder @ iGuiding Media | My Blog | Fresh Genesis ThemesAugust 19, 2015 at 9:36 am #162846masonjarsalads
MemberThanks, I used the first way and changed the email box and input to float left...do I have to make adjustments for mobile in that case too?
August 19, 2015 at 9:42 am #162847masonjarsalads
MemberNow the text is to the right on mobile devices...
August 22, 2015 at 6:53 am #163131Davinder Singh Kainth
MemberTo fix text on mobile.
Change this code
.before-header .enews-widget .widgettitle, .before-header .enews-widget p, .before-header .enews-widget #subscribe, .before-header .enews-widget input, .before-header .enews-widget input[type="submit"] { display: block; float: none; margin: 0 0 10px; width: 100%; }
to....
.before-header .enews-widget .widgettitle, .before-header .enews-widget p, .before-header .enews-widget #subscribe, .before-header .enews-widget input, .before-header .enews-widget input[type="submit"] { display: block; float: none; margin: 0 0 10px; width: 100%; text-align: center; }
Sunshine PRO genesis theme
Need Genesis help? Davinder @ iGuiding Media | My Blog | Fresh Genesis ThemesAugust 22, 2015 at 5:15 pm #163201masonjarsalads
MemberAwesome, thank you David. That worked.
August 23, 2015 at 8:56 am #163225Davinder Singh Kainth
MemberWelcome!
Sunshine PRO genesis theme
Need Genesis help? Davinder @ iGuiding Media | My Blog | Fresh Genesis Themes -
AuthorPosts
- The topic ‘enews widget before header styling’ is closed to new replies.