Shopify Google Recaptcha Image Selector Width Off-Screen - recaptcha

Shopify by default has a google recaptcha V3 implementation: https://shopify.dev/themes/trust-security/captcha
The issue we have is with the image selector going off screen on some mobile devices like so:
Image selector going off screen on ios
We have tried css solutions found on here such as
.g-recaptcha {
transform:scale(0.77);
-webkit-transform:scale(0.70);
transform-origin:4% 0 ;
-webkit-transform-origin:7% 0;
}
But this only affects the 'I'm not a robot' button behind the image selector.
Is there a way to target the image selector at all?
Thanks,
Liam

Related

Images are offsetted in default macOS email client

In our company he have been developing new email design recently and we have bumped into interesting bug occuring only in default macOS Mail.app client. The problem is that around 990px width of viewport all images are offset approximately 40px to the left from their parent <td> element. But the exact width of the viewport when the image is offset is based on the images' width. The HTML snippet is uploaded here. The output HTML is generated by MJML library in NestJS backend of our system. Screenshots with outline turned on on all elements from are on imgur gallery here.
Have you ever experienced this? If so, do you have any tips how to hack this thing to work properly?

How to implement tagging functionality like Instagram with an imageview with exact dimensions in android?

I am working on Tag functionality like Instagram in android,but i am not getting any proper way that how to get tag points on an image and show in another screen with exact points.

Change background color of transparent PNG images uploaded to blogger

I have a blog hosted by Blogger with a custom template: http://www.drugchannels.net/
Images uploaded to the blog are hosted at X.bp.blogspot.com (where X is a number). Examples:
https://1.bp.blogspot.com/-Jwy2VQYRIEA/WqmwvsA07WI/AAAAAAAATA4/jWVcEts1h1Y4IXM0hD0njUhSmQ2AZPnxQCLcBGAs/s1600/Specialty_vs_Retail-2014_vs_2017.png
https://4.bp.blogspot.com/-O4S9ps4u67k/Wk0yhTEuV-I/AAAAAAAASUE/5tPedr-p7_4kedNYU4RY711l6K3maokiQCLcBGAs/s1600/DCI-Copay_Accumulator-03Jan2018-CORRECTED.png
I want to have a white background when the image is clicked. (The images look fine on the site itself. This is not a problem with the blog's background, which is set to be solid white.)
Using the Inspect option in Chrome, I see the following information
The body formatting (background: #0e0e0e;) does NOT appear anywhere on my blog or in my template.
How can I fix?
Thank you!
P.S. I have 10 years of legacy posts with images, so I need a global solution that changes the background to white for all images posted to the blog.
Wrap the image in a div and set the background color of that div with css. That should work
.divclass:active {
background:#FFFFFF
}
If you are opening the images in a new tab or window then your only option is changing the background of the images yourself with a photo editor. If you're just trying to give the user a full size view of an image when they click it you could use javascript/jquery and have a full size div with a background and an image pop up in full screen without sending them to the linked image. Theres probably quite a few jquery plugins that will do this with minimal coding knowledge, just google it.
Thanks, Riley.
I can't go back and edit hundreds of images, so the photo editor option won't work.
But based on your suggestion, I used the following solution:
1) Enabled "Showcase Images with Lightbox" on blogger
2) Added CSS from this page (http://www.howbloggerz.com/2016/05/how-to-customize-blogger-lightbox.html) with no background image and background color set ot white (#ffffff).
Downside is that charts/images now pop up on same page rather than opening in a new tab.
Thank you!

Images rotated on chromecast

I have a Chromecast sender application developed. I try to take a photo in portrait mode with my phone camera. When I try to send it to the Chromecast device, I see it rotated 90 degrees.
This occurred on Samsung Note S3. On Nexus 5, it was showing in portrait mode. I have tried similar applications downloaded from the Google Play and the results were different. Some apps had the same issue while others could cast the photo in its correct orientation.
On another note, Is there a way to have a smooth transition between photos? currently I have the Default receiver app installed and the fade out is working fine. However, new images loads in chunks ... any suggestion on how to fix this?
Thanks
You can create a custom receiver and use CSS to fade between images. Create a div with two image tags and set the CSS style for the div to:
-webkit-transition: opacity 3s linear;
Then use Javascript to toggle the opacity of the images:
image1.style.opacity=0;
image2.style.opacity=1;

Brightcove smart player media controls button quality

Have just completed an implementation for brightcove on the following site: www.disney.com.au.
We have a brightcove player running for some of the items in the main header slidershow. We're using the smart api and when viewed in on desktop(flash) I noticed that some controls in the player are a little blurry. It looks vert similar to an old flash issue where certain items we're blurry if they weren't positioned on a full pixel x,y value.
We cannot use the 'flat' brightcove theme and would prefer not to have to create a custom skin if avoidable. Any idea how to fix this issue ?
Cheers

Resources