I am trying to embed an Instagram slideshow widget onto my Joomla site using a custom HTML module. I would like to modify the size of the slideshow widget dependent on whether the user is on a mobile device or a desktop/notebook. Is this possible?
The widget I'm trying to use is from SnapWidget, and their HTML looks like this (I've hidden the source for anonymity of the Instagram account):
<iframe src="http://snapwidget.com/sl/..." width="505px" height="505px" class="snapwidget-widget" style="border: none; overflow: hidden; width: 505px; height: 505px;" title="Instagram Widget" frameborder="0" scrolling="no"></iframe>
Thanks in advance.
Just add MEDIA QUERIES to style.css of the template :
#media (max-width: 644px) {
iframe {
max-width: 100%;
}
}
Related
I have a html code like this:
<div id="markContainer" class="maxW1000">
<div id="titleRow">
Title
</div>
<div class="card-box listPhotos">
<iframe id="mNote"
src="https://classlive.stume.net/mnote.html" frameborder="0">
</iframe>
</div>
</div>
The CSS is like this:
#titleRow{
background-color: #00a7d0;
height: 40px;
}
.listPhotos {
width: 100%;
cursor: pointer;
height: calc(100vh - 40px);
}
#mNote{
width: 100%;
height: 100%;
}
I chrome browser in desktop, it displays like this. The iframe has its own buttons like this:
But when I open by browser in Android or iPhone, it looks like this. It seems like it taller than the device screen and the last button is hidden out:
You can use below css or also use javascript for making your site responsive.
#media only screen and (min-width:363px) and (max-width:400px) {
#titleRow{
background-color: #00a7d0;
height: 40px;
}
set properties according your requirementt
The problem is inside iframe. You need to style the components inside the iframe
When I publish a page on Blogger with a video, the mobile version of the page does not fit the video. Please see attached screen shot below. An example of a blog page where this happens:
http://www.socialguidez.com/2016/11/3-badass-viral-marketing-techniques-for.html?m=1
Go to Template > Edit HTML. then in the <head> search for this tag ]]></b:skin> and put this code before it.
.post-body iframe {
max-width: 100%;
}
I suggest
iframe {
max-width: 100%;
}
I have question regarding . I am using wordpress and create a new page then under that page i am using the and pass a url by attribute src. So the is working fine and url's page is showing in it. Here i have to remove some part of html from and i try to hide them on firebug, they hide there easily but not working when i apply my css to styelsheet file.
My css is not loads/works on , please suggest me a solution so that i can make my page comfortable.
#iframeBody iframe#contentArea {
height: 100%;
left: 0;
width: 100% !important;
}
#iframeHeader iframe#banner {
display: none;
}
#iframeBody iframe#menuItem {
display: none;
}
iframe#menuTab {
display: none;
}
<iframe src="http://freightforce.com/MainFrame.aspx?id=Customers_horz_accordion.aspx" width="100%" height="1000px"></iframe>
Thanks.
i'm struggling to get a responsive iframe but so far nothing..
I use the following css and html.thanks in advance.
.testme_container {
position: relative;
height: 0;
overflow: hidden;
}
.testme_container-16x9 {
padding-bottom: 56.25%;
}
.testme_container-4x3 {
padding-bottom: 75%;
}
.testme_container iframe {
position: absolute;
top:0;
left: 0;
width: 100%;
height: 100%;
}
<div class="testme_container">
<iframe src="http://www.gmail.com" allowfullscreen></iframe>
</div>
Could you try to explain in detail what you want to achieve?
I tried your code and judging by the names of your CSS classes (16x9, 4x3) it seems to work fine, however, you will have to use a different URL to test it:
<div class="testme_container testme_container-4x3">
<iframe src="http://www.w3schools.com/" allowfullscreen></iframe>
</div>
DEMO
The reason www.gmail.com doesn't show up is, because Google doesn't allow it to be displayed in an iframe. If you look at the jsfiddle you can see, I did not change anything about your code but the link and I added the class "testme_container-4x3".
This JavaScript function relies on jQuery to make all iframes on the page responsive. It handles video embeds to preserve their aspect ratio without extra vertical or horizontal margin but you need to determine the aspect ratio you'll be using in your embedded video.
https://gist.github.com/dylanvalade/b2ba4eaa99ae7968cfd8
You can actually do this in native javascript without any need to rely on jQuery or other framework/library. Responsive Iframes would work perfectly for this.
Im working on a whmcs install and editing the default theme. I'm trying to move a youtube video next to the domain tool, but can't seem to get it to work.
Have a look at: http://jaberminia.com/
All you need to do is:
The div that contains the domain input (prev to the youtube video):
{
float: left;
width: 440px; // more or less
}
The input.bigfield class :
input.bigfield {
width: 80%; // more or less
}
??
<div id="video-box" align="right" style="float:left">