I can't seem to get the Vimeo video on this page to be responsive. I've tried lots of different code that's worked for other people, but not on this page. Can anyone help??? Here is the page: http://give.brighamandwomens.org/stories/entry/stepping-strong
Currently you have width: 550px which is the reason why its not responsive. You need to add width: 100%; on the .ss_video class for it to adjust to screen size.
Related
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.
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 want to make my theme so it will fit all browsers and mobile devices and be fully responsive, how can i do this im using forum software MyBB my forum link is: http://deepblood.com/
Help me please i need this so i can official launch my site.
If anybody would assist me with this issue i would be most grateful :)
Forum: http://deepblood.com/
Software: MyBB
How can i make the theme responsive for all browsers and devices?
Let me go from simple to complex.
Use free responsive mybb theme.
MyResponisve
Use paid responsive mybb themes
Aadya Responsive Mybb Professional Theme
MyBBPro
Customizing a non-responsive theme. (most probably, you are interested in this).
Use Chrome Inspect Elements or Firefox Firebug to see the width of div elements and change their fixed value in pixels to percent denoted by % on css. I recommend you to create a custom css file to put on the template. eg.
#media (max-width: 768px) {
.warpper {
width: 100%;
}
}
The above css code only targets browser/device width of 768px and below. To read more, follow this article.
You can also use Responsive Mobile Menu. Then you have to check and make each page responsive until you find no component that is not responsive.
I created a IONIC/Angular JS application ; and I want to load a web page on it as is done with Android WebView; that is to say, display my web page in a division of my ionic application. So the question is, is there a IONIC component that can do this?
I know you posted this question a while ago. I had the same need to embed a webpage inside my ionic page and the solution I found was to add an iframe tag. Set the source to go to the link you want to embed.The iframe will contain the webpage inside the application. you can even create a controller to add further functionality. See my code below:
<ion-view>
<ion-content class= 'padding has-subheader'>
<iframe class= 'webPage' name= "eventsPage" src="http://www.algonquincollege.com/studentsupportservices/events/">
</iframe>
</ion-content></ion-view>
For styling you will need to target a div with the class scroll that gets created automatically by ionic. For example, I wanted to to make the webpage fill a width of 90%. see code below:
ion-content div.scroll{
height: 90%; }
.webPage{
width: 100%;
height: 100%;
border: 2px solid #EAAB00;
padding: 1rem;}
Hope this helps.
full details here: http://mobileapplicationsdesigndevelopment.blogspot.ca/
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.