WooCommerce Login form centre align

Viewing 3 replies - 1 through 3 (of 3 total)
  • no

    (@ivancanhelp)

    4 years, 10 months ago

    Hi there!

    Centering things in CSS seems simple but can be really frustrating sometimes!

    The reason you’re seeing the page like that after your CSS changes is because the text in your columns (.col-1 and .col-2) is limited by the max-width CSS property, so you are getting something like 16.666667% of 25% which is causing it to cram all the text into a narrow column like you’re seeing.

    Correct me if I’m wrong please but I think you are using Elementor (elementor.com) on your site to create those columns? It might have come as part of your theme too.

    If so, Elementor is controlling the overall layout, alignment, and width of those columns.

    I would suggest to undo the CSS changes you showed above (so that Elementor isn’t fighting against them with this new approach) and instead try to center from within the Elementor tool.

    Centering and managing your layout through Elementor should be easier overall once you get the hang of it, and is much less likely to break in the long term.

    I’m not very familiar with the Elementor tool specifically but I believe it has a way to wrap these columns in a container which would hold your current columns inside.

    They might call it a Section, or it could be as simple as making a new column that is 100% full width and putting your current columns inside of it.

    Please see these instructions on how to align within Elementor: https://elementor.com/help/section-column-vertical-and-horizontal-alignment/

    Hopefully by following those steps you will center your existing columns within their container and your login page should be good to go!

    Let me know if you have any questions, if it’s still not working I’m always happy to take another look and help you get this login page centered. 🙂

    • This reply was modified 4 years, 10 months ago by no.
    • This reply was modified 4 years, 10 months ago by Yui.
    Thread Starter muddephotography

    (@muddephotography)

    4 years, 10 months ago

    Dear @ivancanhelp,

    Thank you for your reply! Sadly when I edit the page in Elementor, is see the logged-in version, which is centered. The only part that’s not centered is the part where you can login and register…

    Because I’m always logged in (as the admin of the site) I can’t edit that part of the account option.

    no

    (@ivancanhelp)

    4 years, 10 months ago

    For a long term solution it might be best to contact Elementor official support (or your theme support if it came with your theme) as they would be in a better position to figure out exactly how you can do what you want with their tools.

    The site has changed a bit since my last reply so I’m not sure if you have some changes in progress right now, but I have a workaround that might help in the meantime.

    Please try add this CSS, it should expand those two columns so that the text looks a bit better:

    #customer_login > div.u-column1.col-1 {
    max-width: 100% !important;
}

#customer_login > div.u-column2.col-2 {
    max-width: 100% !important;
}

    Let me know if that works for you! 🙂

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘WooCommerce Login form centre align’ is closed to new replies.