My WooCommerce Login is not Mobile Responsive plus

Support
#1

Just when I thought I figured it out! I used this code and it looked great on a computer but, when you bring it up on a phone it is “scrunched”. How do I make this CSS code for the WooCommerce Xtheme login mobile responsive?

Also, would love to add a logo! One of the biggest challenges is that Woo Commerce puts the Login and the Account Management page together, so you can’t easily change one without the other. Especially, using the simple Xtheme goodies that make it such a pleasure to use. When you put margins on the login it effects the account management tab after the user logs in.

Below is the CSS code that seemed to do the trick. It worked without effecting the account management screen after the user logged in. But than I logged in with my mobile device and that’s when things blew up. The mobile view of the page. is not responsive and it gets scrunched up! Help?

Make this CSS code so it works in X on a computer and is mobile responsive. That would be magic! Include a Logo to ONLY work on the login page of Woo Commerce and NOT the account management page and I might just propose!

.page-id-572 .woocommerce form.login {
width: 30%;
margin: 0 auto;
}

.page-id-572 .woocommerce form.login .button, .woocommerce-checkout .button {
width: 100%;
border: 0px solid rgba(0, 0, 0, 0.1);
font-size: 18px;
}

.woocommerce-account .woocommerce h2:first-child{
text-align: center;

#2

Hey Scott,

Before recommending a solution, please let me clarify that the WooCommerce login form is responsive in X across all Stacks.

Please also note that providing a fix for custom code is generally outside the scope of our support. We could point you to the right direction if we can but it’s not a guarantee.

Looking at the code, I see you’ve restricted the login form to 30% width only. If you intend to do that on desktop only, you will need a media query like this:

@media (min-width: 980px) {
/* Your CSS for desktop */
}

For more details about Media Queries, please visit the link below:

Otherwise, you’ll get this result on mobile:

Adding a logo or extra content to the WooCommerce Login page is not a feature offered in the theme. It could be possible with custom development or a third party plugin like in the link below:

If you opt for custom development, you will need to consult with a third part developer.

Thank you for understanding.

#3

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.