Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Centering Gravity Form on a WordPress Page!

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #187053
    dskaplan
    Participant

    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!

    #187055
    Paulie_D
    Member

    Wait, 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.

    #187056
    dskaplan
    Participant

    Thanks 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 :)

    #187150
    Flurpy
    Participant

    Hey 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.

Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘CSS’ is closed to new topics and replies.