I'm facing an issue with the remote participant of Twilio video call container width.
I need to control both of views when it come to the mobile and the desktop, but the result is keeps showing as like the attached image.
I've tried to pass to the Video.connect(token, {video: {width: 300, height: 300}}) but it's also not working.
Also when I'm trying to rotate the mobile into a landscape mood it working as expected like the desktop participant view, could any one please help me with that ?
Also those screenshots describe what I'm saying, portrait mood
Landscape mood
I've fixed my issue with adding a static height to the video element itself and adding an object-fit: contain to it.
Related
I have the next question. I am developing a react application with some images. The user has the possibility to click and open a full-page image. Because the image's orientation is horizontal on the mobile, it does not look good. My idea is when the user clicks on the full page icon, the orientation of the phone becomes horizontal as is implemented on youtube. I tried to find some information about that, but I am not sure if it is even possible, I saw that only by using react native and developing mobile applications you can have access to the user's orientation of the screen. But maybe there are some methods to do in the browser? Thanks in advance.
It is not possible to change this from the web, however you could simply rotate the image and display it full screen. This has been done here:
CSS Rotate Portrait Image 90 Degrees and Make Image Full Screen
I’m having some trouble with my website, and I can’t get around it.
I’m trying to have my home page fixed, not scrollable. Which is currently working on desktops but not on mobiles. I checked the margins, everything seems fine.
Even though my code is as follow, for this specific page:
html, body {
height: 100vh;
margin: 0;
overflow: hidden;
}
I can’t get this straight. Any help would be highly appreciated.
The website is http://92-blue.com
Thanks!
Try not using 100 vh , on the mobile version. 100 vh displays the entire screen vertically for any device. When you are viewing it with the 100vh it will take into account the entire phone screen that is why it is scroll able, it gets moved down because of the url bar.
I'm having an issue with Gravity forms' Google noCaptcha reCaptcha (Wordpress Plugin). The pop-up image picker (after you check the box it pops up) is going off of the screen in a mobile size window. It's the only element that does that, so I'm lead to believe that it's not an issue with my styling. Has this ever happened to anyone before? I've tried researching it but the only thing I can find is talking about the "I'm Not a Robot" box not being responsive, which is NOT my issue here.
Here's an image of the site before the box is checked:
And here is an image of after it's checked:
Thanks in advance!
You can fix that issue with css. Kindly read this http://www.scriptscoop.com/t/6d0a4ba8dc7e/html-why-didnt-google-make-the-new-v2-recaptcha-mobile-friendly.html
On my website I am using Bootstrap 3.2 for responsive design and I am trying to embed Adsense responsive adds there. I am having problems with orientation changes: I would expect that adds would resize on such event, but it doesn't happen. Is such feature ready for Adsense? Some old post on Adsense blog says:
The new ad code is responsive on initial page load only. Subsequent
changes to the ad size, such as a screen orientation change, will not
cause a new ad to be displayed. We know that this is an important
feature for many of you and we’re currently working to address this.
But current documentation doesn't mention such issue. Does this resizing work?
So it turns out the blog post I was quoting is about advanced mode (mode which allows specifying exact ad size via CSS). Even though more than a year ago Google recognized the problem, the advanced ads are not resizing automatically when screen orientation chages.
The AdSense documentation states that responsive ads resize with orientation changes. That's true, but only for default (not advanced ads).
The advanced mode allows specifying exact ad sizes with #media CSS rules which is nice. But for me it was possible to achieve almost same thing by wrapping default responsive ads with div container. The container's size can also be specified by CSS #media rules, so I have same result as with advanced ads + I get benefit of ads resizing when screen orientation changes.
I'm mainly shooting here, cause it's not a lot of information here to be fair, but:
What happens if you add style="display:block;" and also data-format="auto" to your ads?
If this is not going to help, I guess media queries are your friend in this matter.
Ads from AdSense, even responsive ones, are loaded based on your screen size and orientation one time - when the webpage is loaded. Of course, you can try to reload part of page where your ad is served, but then you will have a problems with inner iframe elements (AdSense don't like to be in iframes).
Try using this - https://github.com/mattnish/rad
I just used it in one of my projects and even though it says "outdated" it works perfectly.
The problem with adsense "responsive ads" is that it is responsive only on initial load.
Here is my take on this one. I used advanced mode with a responsive ad unit and put in the following media queries.
<style>
.myclass-responsive { width: 320px; height: 100px; }
#media (min-width: 768px) and (min-height: 768px) { .myclass-responsive { width: 728px; height: 90px; } }
</style>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- myclass-responsive -->
<ins class="adsbygoogle myclass-responsive"
style="display:inline-block"
data-ad-client="XXXX"
data-ad-slot="YYYY"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
The point being that the ads in advanced mode are loaded based on the device viewport dimension but do NOT resize dynamically. The default smart resizing mode produced mixed results with my layout and would occasionally break it on dynamic resize. Using (min-width: 768px) and (min-height: 768px) in a Bootstrap layout with a responsive ad unit in advanced mode seems to fix any resizing issue I had (well on the 5 devices I tested at least). However you may get undersized ads for some devices but that the story about it ... you can't get it all.
I have a site which uses a different menu for mobile devices than on the Desktop version using media queries. If I resize a desktop browser window to a mobile width and click the mobile navigation dropdown button and then resize the window back to desktop size, the mobile menu remains visible instead of changing back to display:none. Unfortunately this site is still in staging so I cannot show you a live example, but I was hoping someone could point me in the right direction of getting that DIV to become hidden again once the window is resized back to full screen.
Also, I realize that the chances of this scenario playing out in the real world are slim, but the client would like for it to be addressed anyway.
Thanks!
I figured out that it was javascript that was showing the DIV in the first place, not a media query, so I just added display:none to the div for the Desktop media query and the issue has gone away. Thanks!