Centering the form as a whole

Home Forums Quform WordPress Centering the form as a whole

This topic is: not resolved
Viewing 15 posts - 1 through 15 (of 16 total)
  • Author
    Posts
  • #6360
    michaelmangum
    Participant

    I have my form on a page with a right sidebar. I’ve built my form the way I want it, but its default to aligning on the left side. (shown in photo)

    I tried to put the form within a <div align=”center”></div> tag to center the whole thing, but I’m sure the float CSS inside the columns/groups is causing the layout error (shown in other photo)

    I’d like to have the form centered in the body of the page like most of the form elements are in the second photo. Is there a way to get the form centered?

    I tried to search the forums, but I couldn’t figure out a way to search “topics” and it kept sending me away from the forums into the FAQ section. Any help would be much appreciated.

    Attachments:
    You must be logged in to view attached files.
    #6368
    Ally
    Support Staff

    You don't have permission to view this content. Please log in or register and then verify your purchases to gain access.

    #6382
    michaelmangum
    Participant

    Yep that definitely moved the form over to the center, thank you! But, is there a way to also center the elements within the form? I followed the instructions in the video in making 2 columns in a row and changing the “float” setting, is this going to cause a problem with the CSS? After making your suggested change, I tried myself to figure out a way to center the elements myself, with no luck. The screenshot shows the centered form, with some of the elements centered, but not every element is.

    Groups in my form. First group: First name, last name, DOB. Second group: Date element, time element.

    All the other elements in this form are not in a group, but are still kind of displaying weird (like the yes/no bubbles, the CAPTCHA box, and the Submit button)

    Thanks for your help! I love this form builder.

    Attachments:
    You must be logged in to view attached files.
    #6386
    Allan
    Support Staff

    You don't have permission to view this content. Please log in or register and then verify your purchases to gain access.

    #6387
    michaelmangum
    Participant

    Sure thing. I just ordered a dedicated IP and SSL so my site is down for a few hours. I’ll post it as soon as it becomes available. Thank you!

    #6388
    michaelmangum
    Participant

    The attached .txt file has the export code.

    Also, any tips on how to make the forms play along nicely wiht responsive sites? Or should I just make the form have a max width of the equivalent pixel width of the smallest screen that views my site (i.e. iPhone in portrait orientation, something like 380px or so)

    Attachments:
    You must be logged in to view attached files.
    #6393
    Ally
    Support Staff

    You don't have permission to view this content. Please log in or register and then verify your purchases to gain access.

    #6402
    michaelmangum
    Participant

    That’s awesome! But, on that page there is no CSS code in that document for “Mobile Portrait Size” so it’s still not displaying properly on a mobile phone :/

    #6408
    Allan
    Support Staff

    You don't have permission to view this content. Please log in or register and then verify your purchases to gain access.

    Attachments:
    You must be logged in to view attached files.
    #6427
    michaelmangum
    Participant

    That’s great!!! This is really coming together now! Couple more things. In the attached image the date and time elements aren’t displaying straight across like the other 2-column elements, and I couldn’t figure out why. And then the last thing is the CSS for the responsive nature includes everything down to Mobile Landscape, but there is no element for Mobile Portrait. And again, I tried to figure it out based on how the other conditions were coded, but I couldn’t figure it out.

    If you need access to the back and front ends, let me know, I’m happy to get you access.

    Attachments:
    You must be logged in to view attached files.
    #6440
    Allan
    Support Staff

    You don't have permission to view this content. Please log in or register and then verify your purchases to gain access.

    #6463
    michaelmangum
    Participant

    Just a heads up, I emailed info to the email address you listed. Thanks!

    #6464
    michaelmangum
    Participant

    Also, the latest version of the CSS to make the form responsive actually made the form display more inaccurately in Mobile Portrait than the version before. The width of elements changed and the layout of a couple elements were off, whereas with the previous version the only style that was off was the width of the form. FYI. I’ve saved the previous CSS code if that helps at all.

    #6465
    Allan
    Support Staff

    You don't have permission to view this content. Please log in or register and then verify your purchases to gain access.

    #6466
    michaelmangum
    Participant

    Everything works perfectly. It’s spaced perfectly, fully responsive, looks great on every device. This is fantastic. I really appreciate the help. I keep trying to teach myself these techniques so that I can troubleshoot things for myself, but I couldn’t figure it out on this, so thank you very much. Hopefully you guys can use this for others as well. I hope my pickiness helps others as well. Will be recommending you to my designer friends. Thanks!!!!

Viewing 15 posts - 1 through 15 (of 16 total)
  • You must be logged in to reply to this topic.
Be inspired. © 2024 ThemeCatcher Ltd. 20-22 Wenlock Road, London, England, N1 7GU | Company No. 08120384 | Built with React | Privacy Policy