Splash page off centered on the mobile
If I use the splash page with the join form (for create an account) all the content is shifted to the right, it is off-centered on the mobile. It is displayed correctly using the login form.
How can I solve that?
-
.bx-def-padding {
padding: 0 !important;
}
Check if this may affect other areas.
-
Hi Yra
I can't find that code in Designer-Splash. Or do I have to add it somewhere? Where? Thanks. -
Hi Yra
I added that code between the <style> and </style> tags in Designer-> Splash but it doesn't fix the problem. Also thanks for responding. -
Hello Claudio Acosta !
You can add this here /studio/designer.php?page=injections in HEAD by wrapping it in the <style> tag. Or, here /studio/design.php?name=bx_protean&page=styles in custom styles. I think there is not much difference, but there may be another opinion.
-
Hi Yra
I tried those alternatives too, but the same is still happening. If instead of using the join form I use the login form, then it is displayed correctly. As if the problem was the join form.
-
I don’t know exactly how you tried, but I was interested and I tried on your site. This should work, clean the cache.
-
Hi Yra
I followed exactly the steps that you had indicated.
Furthermore, I cleared the cache in Dashboard-> Cache> Clear all caches. I also cleared the browser cache that I am using on my mobile. I tried on different phones and the same thing happens in all of them. -
Right now I went to your site and you haven’t done it. You can throw off accesses from the site by personal message, I will.
-
Hi Yra
I did what you indicated, then I removed the code. If you can try, I add it again.
I did not understand what you meant by "You can throw off accesses from the site by personal message, I will." -
The problem is that the recaptcha doesn't fit your screen size, that's why full page width gets resized when recaptcha is loaded.
Try with this.
@media screen and (max-height: 410px){
.g-recaptcha > div {
transform:scale(0.77);-webkit-transform:scale(0.77);transform-origin:0 0;-webkit-transform-origin:0 0;
}
}
If it doesn't work, try this:
@media screen and (max-height: 410px){
.g-recaptcha > div {
transform:scale(0.77);-webkit-transform:scale(0.77);transform-origin:0 0;-webkit-transform-origin:0 0;
width:220px;
}
}
MSolutions.
-
Hi MSolutions
Confirmed that the problem is the recaptcha, I disabled it in the form and then everything is displayed correctly. But I would not want to do without the recaptcha.
I tried the 2 alternatives in:
- Splash page, between the <style> tags
- Designer-> Injections-> Head, between the <style> tags
- Protean-> Styles-> Custom styles
Right now the second alternative is configured, in Protean-> Styles-> Custom styles.Thanks.
-
I meant a private message. Sometimes there are quirks of translating Google. You probably have a syntax error, because some option should work.
-
Yra MSolutions
Thank you both so much for the help.
Yra it works perfect with the code modification you made.
In case anyone else is interested, this code was added in Protean-> Styles-> Custom styles:
.bx-form-input-captcha > div {transform: scale(0.77);-webkit-transform: scale(0.77);transform-origin: 0 0;-webkit-transform-origin :0 0;
width: 220px;
}
