Hello,
I am trying to style the my-account page from WooCommerce. I’m now busy with the login part but can’t get what I want. The login box and register form aren’t on the same row but in column style.
Is there someone who would like to point me in the right direction or maybe knows the proper css rules for this?
Kind regards,
Vasco
Hi there,
Can you share the page and a screenshot of your backend?
Try adding this to the container:
div#customer_login {
display: flex;
}
I do recomment to only do this for desktop.
Thanks, this works, what would you recommend for max media size?
@media only screen and (min-width: ***px)
1000px width?
Click the tablet and enter the following:
div#customer_login { }
Then check on the mobile if the CSS is also changed. (this is the lazy way)
If you wanna get it right, I’d recommend doing the following:
@media screen and (min-width: 990px) { div#customer_login {
display: flex;
} }
This makes sure that the change is only on desktop.
Thanks, if I check this on my iPhone 14 Pro it doesn’t make any change unfortunately.
I added the rules just like you recommend.
Ahh I see, the please add this css per device (from tablet and down):
div#customer_login { display: contents; row-gap: 2em; }
This did the trick, thanks!