Some CSS issues in mobile

We have moved to a support ticketing system and our forums are now closed.

Open Support Ticket

Author

Posts
September 26, 2017 at 11:16 pm #397553

Joy
Buyer

Post count: 1076

Hello, I am using the uwp captcha to fit on mobile screens but am getting undesirable results when using the “Send to Friend” and “Send Enquiry” links on the listings when in mobile view.

On both of these forms, the “Send” button is being pushed all the way down to the bottom of the form/screen making it difficult or impossible to click on it.

In additon, the listing owner avatar appears on the form too. I’ve tried to adjust via z-index, but then the listing image is placed behind the featured image overlay.

Please have a look. Thank you.

September 27, 2017 at 1:07 am #397564
Kor
Moderator

Post count: 16516
Hi Joy,

You should be able to fix the avatar issue being displayed on top of the contact form using this custom CSS.
```
#simplemodal-container {
    z-index:9999999999!important;
}
```
As for the captcha issue, do you mean you’re using another captcha plugin on mobile?

Thanks!
September 27, 2017 at 1:11 am #397566

Joy
Buyer

Post count: 1076

Ok I will try that.

I am using the uwp version of the captcha (its related to the new uwp plugin) because the regular captcha goes beyond the form margins in mobile.

The captcha pushes the send button further down on the form so it makes it unusable at times.

September 27, 2017 at 1:25 am #397567

Joy
Buyer

Post count: 1076

https://userswp.io/support/topic/recaptcha/

This may help to explain.

September 27, 2017 at 1:30 am #397572

Kor
Moderator

Post count: 16516

This reply has been marked as private.

September 27, 2017 at 2:02 am #397582

Joy
Buyer

Post count: 1076

No luck with the z-index either. I know I tried to work on it before but I wasn’t able to get it right. Thank you for including my page details in the flagged post for the devs.

September 27, 2017 at 7:49 am #397617
Kiran
Moderator

Post count: 7069
Hi Joy,

I have added following snippet.
```
@media (max-width: 668px) {
    .sd .sd-detail-author,
    #simplemodal-container {
        z-index:999999999!important;
    }
}
```
Please check and let us know.

Kiran
September 27, 2017 at 8:28 am #397618

Joy
Buyer

Post count: 1076

Hi Kiran,

Thank you. That took care of the z-index issue. But the “send” button being cut off at the bottom of the form on mobile still persists.

Thank you.

September 27, 2017 at 8:44 am #397621

Kor
Moderator

Post count: 16516

Hi Joy,

I’ve just tested it again and it works fine now. I’m able to verify the captcha and also see the send button. Check out the screenshots below.

http://prntscr.com/gq8myi
http://prntscr.com/gq8mzd

Thanks!

September 27, 2017 at 9:14 am #397627

Joy
Buyer

Post count: 1076

Sorry that’s not what I’m seeing. The Send button is still being cutoff. I have S7.

September 28, 2017 at 9:31 am #397832

Stiofan O’Connor
Site Admin

Post count: 22956

Hi Joy,

That is the navigation bar, it shows if you scroll down and hides if you scroll up, this is part of the browser and not something we can control.

Stiofan

September 28, 2017 at 9:33 am #397833

Joy
Buyer

Post count: 1076

Isn’t there a way that the modal can be positioned to open higher up on the page? Right now it opens with a bit of a margin. I think if I can adjust this it would fix the problem.

Thank you.

September 28, 2017 at 12:48 pm #397868

Stiofan O’Connor
Site Admin

Post count: 22956

The height is determined based on the content of the form, as i said, the action of trying to sroll down to see this should hide the action bar and show the button.

You could try adding a max-height to the container but i’m not sure if the JS would overwrite it or not.

Stiofan

September 28, 2017 at 5:14 pm #397909

Joy
Buyer

Post count: 1076

Please see attached for the question about the margin.

Is there a way that the captcha can be adjusted so it’s on a single line? That would also help.

The reason I am using the smaller captcha is because on other forms (registration, forgot password, etc) the captcha is too wide and escapes the form limits. I was advised to use css to keep the size within the forms, however it’s not working well for these sets of forms since it appears in a modal and pushes the captcha into two rows.

September 28, 2017 at 5:40 pm #397911

Stiofan O’Connor
Site Admin

Post count: 22956

You would have to try the margin thing yourself… I tried you site on an S7 and all u have to do is scroll up to hide the nav bar and you see everything.

The recaptcha is designed to go over two lines in some cases, you can try changing the iframe width with css but again the JS might not let you.

Stiofan
Author

Posts