[Debut Theme] Aligning elements in Login page

rbelle
Tourist
31 0 14

Hi!

I've recently added a social login app (miniOrange) for my store.

rbelle_1-1619113984211.png

What is the best way to centre-align them side by side, stretched to the width of email & password fields?

Here are my current CSS styles (I have no idea what I'm doing):

#mo_openid_login{
  display: block !important;
  clear: both;
}
#mo_openid_login>a{
  float: left;
}

as well as a preview of the store, since the theme is not currently live. 

https://q9hy8aknp98lpoa5-55306092726.shopifypreview.com/account/login

Is there also a way to align "Forgot your password?" to the bottom right of the password field?

Greatly appreciate any help on this, thank you!

 

 

UmairA
Shopify Partner
872 85 172

Hi there @rbelle,

Add the following code to your theme.css file

#mo_openid_login {
    display: flex !important;
    justify-content: space-between;
}

#mo_openid_login > a:nth-child(2) {
margin-left: auto !important;
}

#customer_login .text-center > p {
    text-align: right !important;
}

Hope it helps.

 

Need help with theme customization or to add a new feature? Hire me
Email: umairabbascs@gmail.com
WhatsApp: WhatsApp
Theme customization | Custom coding | Store Setup | SEO Audit | Speed Optimization | Tweaks & Bugs fixing
0 Likes
rbelle
Tourist
31 0 14

Hi, thank you for your help!

This is what it looks like now, there're still slight gaps between Facebook and Google buttons.

I also can't seem to style "Forgot your Password" (id=#RecoverPassword) without affecting Create account.

rbelle_0-1619145038342.png

Would you have a fix for this?

 

0 Likes