login css on mobile

Hi @fscbmwcca

I hope you are doing well.

I can see the fonts working fine on the mobile, but the form outside the screen, is it the issue?

If so, could you try to add this additional CSS on the Custom CSS box?

@media only screen and (max-width: 768px) {
  .login .branda-login {
    margin-left: 0;
    width: 100%;
 }
}

In case it isn’t the issue, could you send a screenshot of the problem that you see?

You can upload it on Google drive and share the link

Best Regards
Patrick Freitas

Thank you for using Branda. We are going to close this ticket for now because we have not heard from you in a while. If you still need support we can reopen the thread.

Cheers,
Predrag

So sorry I did not get the first response. Tried the code but the fonts are still not correct. On iPhone nor Android.
Here is a screen shot.
https://www27.zippyshare.com/v/hyVYMDj0/file.html

Hi @fscbmwcca,

I’m sorry, I’m not sure whether I understand what exact issue you notice regarding fonts. We could notice the correct fonts are loading in laptop and mobile modes.

Which is:

font-family: shadows into light, helvetica neue,Helvetica,Arial,sans-serif 
 !important

The screenshot what you have shared only seem to point the login form isn’t aligned to the centre or is there anything else that needs to be looked specifically for fonts? Could we know which exact text where you notice font issue?

As stated by Patrick in the previous reply if you meant whether the form isn’t aligned to the centre, then the above-given CSS should have worked fine.

When I check the source of your website, I couldn’t find the CSS we have shared present on the website.

Could we know where exactly the above CSS is added? It should be added under Branda > Front-end > Login Screen > Custom CSS.

Could you please try and see whether adding the CSS in the above section helps or not?

Please check and advise whats being missed. Looking forward to your response.

Kind Regards,
Nithin

Yes. The css is added under Branda settings as mentioned above. The mobile screenprint link I included does not display Shadows Into Light for the labels (username, password, hover).
I have another website (rasugar.com) where the same thing is happening. I’m not sure what I’m missing?

Hello @fscbmwcca ,

Custom fonts added to the theme (front-end of the site) will not work on the login page. Reason for this on login screen different scrips are loaded and custom fonts are not called.
So using a font in CSS that is not declared on that particular page will not work.

You need to add that font on the login page.
In Custom CSS field in Branda -> Login screen, place:

@import url('https://fonts.googleapis.com/css2?family=Shadows+Into+Light&display=swap');

at the top of the field (it needs to be the first line in Custom CSS).

After that, your font should work. But it’s better to use it’s name like that:
'Shadows Into Light'

kind regards,
Kasia

Thank You, Thank You, Thank You!
That worked perfectly!