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
Related
I have:
jumplinks
two different designs for desktop and mobile
some CSS media query in order to display only one of the designs while the other one is on display: none.
Basically is something like that:
go to my_ID
<div id="my_ID" class="desktop"> my desktop content</div>
<div id="my_ID" class="mobile"> my mobile content</div>
It works fine for the design, but the jumping only works partly: The browser always wants to jump to the first ID, if the first ID is not displayed the browser does nothing. (I thought it will jump to the second one that is displayed.)
Is there any solution for that problem like adding the IDs dynamically with jQuery or some other workaround?
Thanks in advance
ID's can only be used once per html page.
The anchor should be different for desktop and mobile if one is hidden depending on the user's display.
/* Medium screens and larger - example */
#media only screen and (min-width: 40.063em) {
a[href="#my_mobile_ID"],
#my_mobile_ID {
display: none;
}
}
/* small screens - example */
#media only screen and (max-width: 40em) {
a[href="#my_desktop_ID"],
#my_desktop_ID {
display: none;
}
}
#my_desktop_ID {
background: lime;
width: 300px;
height: 400px;
}
#my_mobile_ID {
background: cyan;
width: 300px;
height: 400px;
}
go to my_desktop_ID
go to my_mobile_ID
<div id="my_desktop_ID" class="desktop"> my desktop content</div>
<div id="my_mobile_ID" class="mobile"> my mobile content</div>
I changed the href of the links on mobile with some jquery, now I can use two different IDs. It goes like that:
if ($(window).width() < 767){
$("a[href='my_URL']").attr('href', 'my_URL_mobile');
}
I have a google maps Section on my website for my contact page. In my browser the css for the map is
<div class="googlemap" style="margin-left: 50px; margin-right: 50px;">
<iframe style="border: 0;" src="map" width="50%" height="600" allowfullscreen="allowfullscreen">
</iframe>
</div>
In a smarthphone view i get the half map and aligned in left as shown below.
Google maps on mobile
I want to apply CSS that makes my map responsive on mobile.
I try something like the following but it doesnt work
#media screen and (max-width: 600px) {
.googlemap{
//these are the ideal margins for my mobile view
margin-left: 10px;
margin-right: -350px;
}
How to set this properly working?
Note two things that you must account for in restyling your map component:
Inline Styles
Iframe Attributes
The only way to override inline-styles from a stylesheet is to use the important! keyword. Read up on specificity to understand what is going on and some ways to overcome it: https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
You may also have to use the important! keyword to override the iframe width and height attributes.
I don't know what your expected final design should be, but you could do something like the following:
* {
box-sizing: border-box;
}
#media screen and (max-width: 600px) {
.googlemap {
margin: 10px !important;
}
.googlemap > iframe {
width: 100% !important;
height: auto !important;
min-height: calc(100vh - 20px);
}
}
<div class="googlemap" style="margin-left: 50px; margin-right: 50px;">
<iframe style="border: 0;background: gray;" src="map" width="50%" height="600" allowfullscreen="allowfullscreen"></iframe>
</div>
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%;
}
}
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.
I want to fix the size of empty image to 150px. On Firefox, I can use float: left, but it doesn't work on Google Chrome.
HTML:
<div>
<img src='some broken url' alt='no image'>
<br>
<img src='http://farm7.staticflickr.com/6063/6046604665_da6933bd10.jpg'>
</div>
CSS:
div {
width: 450px;
height: 500px;
background: cyan;
}
img {
display: block;
max-width: 100%;
min-height: 150px;
min-width: 150px;
background: grey;
}
Is there a CSS solution for this?
I think there is some misunderstanding. The srcs are supposed to be random urls that I wouldn't know in advanced.
Ideally, use an empty placeholder <div> for this:
<div>
<div><!----></div>
<br>
<img src='http://farm7.staticflickr.com/6063/6046604665_da6933bd10.jpg'>
</div>
... and give it the dimensions you need. This will allow you to do stuff like show a background placeholder image in its place etc.
If you want to style an empty image-tag:
img[src=""] { width: 150px; }
Should work, expect for IE6.
If you want to get it cross browser compatible, the solution from #Tom would be your best choice.
Or jQuery solution (because CSS can't check for broken URLs):
$('img').error(function(){
$(this).css('width', '150px');
});