- This topic is empty.
-
AuthorPosts
-
October 25, 2014 at 9:21 am #187053dskaplanParticipant
Hello all, first post. Amazing site! I have a (probably incredibly simple) CSS issue that’s been bugging me for days. I’m a CSS newbie, but I’m trying to learn as fast as I can as I’m putting up my wife’s Wellness based website using WordPress and she “needs it now” ;).
The issue is the newsletter signup form on the main page at janellkaplan.com. For the life of me, I can’t get this form to auto-center. Right now I’m using a margin-left to get it where I need it, but obviously if you scale the browser, it messes put he form!
Here’s what I’m using for this newsletter signup form block. Questions is, how can I auto center the form fields?
<div style="position: relative; text-align: center; margin-top: 10px; margin-bottom: 20px; "> <h3 style="padding-top: 20px; margin-bottom: -24px;">WANT TO KNOW 5 SECRETS TO</h3> <h1 style="margin-bottom: -18px; font-family: 'Petit Formal Script', cursive;">Free Yourself from Chronic Illness?</h1> <h3 style="margin-bottom: -18px;">JOIN MY LIVEWELL COMMUNITY AND GET THE eGUIDE FOR FREE!</h3> <div style="margin-left: 205px;">[gravityform id="2" name="Newsletter" title="false" ajax="false"]</div> </div>
Thank you in advance!
October 25, 2014 at 10:45 am #187055Paulie_DMemberWait, is your question about centering the form or centering the elements inside the form.
https://css-tricks.com/centering-css-complete-guide/
Either way. we really need to see it in action. Could you make a Codepen.io demo?
I dislike seeing inline CSS such as you have in your code block…it makes me think that you’re tweaking things too much.
October 25, 2014 at 11:19 am #187056dskaplanParticipantThanks for the reply! The question is about automatically centering the gravity form on the page. It’s online right now at janellkaplan.com. I’ll look over that guide too :)
October 27, 2014 at 7:03 pm #187150FlurpyParticipantHey there, I had a look at your site and did some fiddling with the Chrome developer tools and had some success.
Try wrapping the code inside the form in a div, set a class on it and add margin: 0 auto and text-align:center to that class and see how that goes.
You may wish to look into using media queries if you’re looking for further control over what happens at smaller screen-widths. There’s an article on them here https://css-tricks.com/snippets/css/media-queries-for-standard-devices/
Hope that helps.
EDIT: In hindsight, you could probably get away with just setting “text-align:center” on your form tag for the functionality you’re looking for.
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.