Hi guys I'm looking to resize an iframe depending on size of the browser window, but I'm all turned around as too the height and width. Would REALLY appreciate some explanation on where I'm confused.
I understand how to use css media queries use diff stylesheets according to screen size, but how does this apply to an iframe that's located on another website when I have to predefine the height and the width inside the iframe?
Do you even need the height and width to be defined inside the iframe? Or can you use media queries to detect the size of the browsing windows containing the iframe and then set the height and width values depending on that.
For instance is what's normally in the iframe, but how would I get the iframe to be something like if the other website is brought up on an iphone?
Or am I missing something?
Try setting your iframe height/width to a percentage. Like:
<iframe height="100%" width="100%"></iframe>
That will cause the iframe to expand to it's maximum possible size depending on its parent container.
Related
I am trying to convert a poorly designed template to a responsive design, found here:http://www.crhinc.com/about-mobile.html
Im having an issue where on desktop browser sized to mobile the template looks and works great, but on android and iphone, the page is larger than the viewport. i know i must be missing something, but as you can see, i have outlined the elements just to get try and see if i can find out whats in there that is stretching it outside the viewport and cause mobile phones to scroll from side to side but not desktop browsers.
i set the body up for 300px width just to see if i could find the rogue element, but put it back because it did not work. there are a few tables in the content, but all set to 100% width.
for some reason, it almost looks like the width in the desktop and on mobiles or not actually the same.
Jeff
Do you actually think it is the viewport? Do you have the viewport set with the right content?
Maybe this link could help.
Or is it just the CSS? In that case I would recommand you searching for width and such. Trying to find big numbers..
Setting a specified width should be for specified screen sizes. Otherwise make it max-width.
I have a page that loads an iFrame (fancybox). My CSS media queries work fine on the parent pages but when the content is called within the iFrame, the media queries don't work. (the content within the iFrame has it's own stylesheet).
How do i get the media queries to work within the iFrame?
FYI - My width and height is being set by the javascript that calls 'fancybox' which creates the iFrame and is set using percentages.
Unless I'm very much mistaken, you have very little 'outside' control over the contents of an iframe with your CSS. I think you're kind of out of luck.
I'm using media queries to scale an <iframe> based on screen resolution: the iframe and its contents get smaller, as the screen gets smaller. Now, this seems alright on paper, but for some reason, as the iframe's size decreases, it clips part of the content. I've tried going to the source file, and using media queries there, in hopes that the <iframe> would also include those; to no effect.
Is there any way to scale, or resize, the contents of an <iframe>, using CSS media queries, without resizing the iframe itself?
There is no possible way to style any of the content within a iFrame, because it is pulling content directly from somewhere else and is not taking anything from your site into account.
If you are just trying to grab a few things from a page maybe you should look into PHP.
What is the best way to dynamically change the width and height of an HTML5 video within a webpage? The kind of behaviour I'm referring to is the same thing in the intro video of http://flipboard.com/
When the window is resized, the video still takes up 100% of the viewable size (without scrolling). I noticed that the video gets resized to a certain degree, but stops resizing and gets cropped at some point.
What is the best way to get the same behaviour? I want to have a video take up the entire viewable area of the browser without scroll bars. This is only on a desktop/laptop, I am not considering any mobile devices ATM.
What I have in mind right now is to dynamically change the width/height properties of the video to fit the viewable area using javascript, but also set a minimum size such that the video doesn't get distorted. The video can be placed in a container that is always centered, so if the browser gets to a size that is too small, it effectively gets cropped. I'm not sure if this is too long-winded and if there is an easier way.
Thank you.
It looks like they have the css properties of height and width set to 100%. If you use an element inspector like the one built into chrome or firebug for Firefox, you should be able to see exactly how they structured the html/css for the video element as well as the div its nested in. Then, as you said, also set a min-width/min-height property.
Unless I'm misreading your question, it should be that simple. Hope this helps!
you could do it with "Responsive CSS", there are some ways to do that,
you could set the viewport, max-width, min-width, etc.
This link have a nice explanation how to do that : http://kyleschaeffer.com/best-practices/responsive-layouts-using-css-media-queries/
All,
I am writing the CSS for our web application. The whole application needs to fit in the browser window without any scrollbars appearing. I also want to set a min-height & min-width properties so that if the browser window gets smaller than our min., only then will the scroll bars appear.
Is there a way of achieving this in CSS please?
Your problem depends to the screen size of the viewers, which may varies greatly. My propose is that you should create a fix width/height div which is the wrapper of all the content (usually 1024x768).