Hello @jasperdemann
You can adjust the size and positioning of the “You are already logged in…” message box in mobile device using the following CSS and JavaScript:
CSS:
@media (max-width: 767px) {
.eael-lr-form-wrapper.style-2 {
text-align: center;
display: block !important;
}
}
JavaScript (jQuery required):
jQuery(document).ready(function($) {
var loginMessage = $('.eael-login-form-wrapper').html();
loginMessage = loginMessage.replace(/\s*(<br\s*\/?>)/, '$1');
$('.eael-login-form-wrapper').html(loginMessage);
});
This will center the message box on smaller screens and ensure that unnecessary whitespace is removed. See the screenshot here: https://d.pr/i/FuohMx
Let me know if you need any adjustments!
Thank you
Thanks for your reply.
I’m using Elementor Free on my subdomain as I don’t need Pro so as there’s no option in ‘Advanced’ > ‘Custom CSS’ to add it directly, I’ve put it in an HTML Widget between <style> and </style>
Will that work? I’m a beginner at this!
Also, how can I test it?
Yesterday, when I logged into the subdomain on my laptop I could see the message on my mobile, but today I’m being asked to log in again on my mobile. Not sure why that’s happening!
Hello @jasperdemann ,
Greetings. Hope you are doing fine.
Can you please try using this CSS:
@media (max-width: 767px) {
.eael-login-form-wrapper.eael-lr-form-wrapper.style-2 {
display: block !important;
}
}
You can simply add custom CSS by navigating to your WordPress Dashboard -> Appearance -> Customize.
After you are on the Customizer page, search for the “Additional CSS” option. You can then go ahead and insert CSS Code. Please check this screencast to learn more – https://d.pr/v/QrrfTw
Thank you.
Hi
Great, thanks.
Just to clarify, do I need to add two CSS snippets?
@media (max-width: 767px) {
.eael-lr-form-wrapper.style-2 {
text-align: center;
display: block !important; } }
and
@media (max-width: 767px) {
.eael-login-form-wrapper.eael-lr-form-wrapper.style-2 {
display: block !important;
}
}
Also, how can I check everything looks good at the front end, please?
Hello @jasperdemann ,
Greetings.
Please try using this CSS:
@media (max-width: 767px) {
.eael-login-form-wrapper.eael-lr-form-wrapper.style-2 {
display: block !important;
}
}
You can simply add custom CSS by navigating to your WordPress Dashboard -> Appearance -> Customize.
After you are on the Customizer page, search for the “Additional CSS” option. You can then go ahead and insert CSS Code. Please check this screencast to learn more – https://d.pr/v/QrrfTw
Once you add the CSS, you can check it from incognito mode if it is working fine or not. Let me know.
Thank you.
I’ve added the CSS, but if I log into Chrome or Firefox then into Incognito, I’m not seeing the message.
Hello @jasperdemann,
Greetings.
Can you please share a screenshot of what you are seeing? From my end, it shows like this: https://d.pr/i/4wDDDR, PS: I didn’t add the CSS on my end, that’s why it is showing in two lines.
Let me know. Thank you.
If I log into Chrome or Firefox then into Incognito, for example, I get the EA login/register page.
The ‘You are already logged in…’ message is nowhere on the screen.
Hello @jasperdemann ,
Greetings.
Can you please share a screen record of the issue? I will check and get back to you.
Thank you .
Hi
Yesterday I was seeing just a blank, white screen, with no ‘You are already logged in as …..’ message at all.
Today, even though I’m logged in using Chrome, when I go to Incognito, I am now seeing another EA Login page.
I’ve tried to send you a screen recording but there’s a problem uploading it because of missing alt text so I hope you can visualise what I can see!
-
This reply was modified 1 year, 3 months ago by
jasperdemann.
Hello @jasperdemann,
Greetings. Hope you are doing fine.
We couldn’t find the issue on our end. Can you please reach out to us here if you want us to debug further. We will look into it and get back to you with an update.
Thank you.
