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.
Related
I need to style an iFrame differently based on if it is loading on an iPad or desktop. I'm guessing this is done with a media query but I cannot find a solution. I need to use on only one style sheet.
Have you tried using #media max-device-width=1024{}? This should get your css working on an iPad and anything smaller.
Also set a percentage width on your iFrame tag, so it sizes to the screen.
I'm loading iframes for a special application and need a way to disable the responsive coding (viewport and media queries) in all iframes.
Is there a simple way to do this? Let's say applying an ID to the element was out of the question (since it's from another domain).
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.
Ok, So I designed a responsive layout that doesn't show images for very small screen sizes, using media queries and display: none;.
So far so good. But these images still download on these devices, causing an increase in bandwidth.
What is the proper way to make these images not download on the specified devices?
Any response would be much appreciated!
Two options I can think of:
Detect small devices on the server using browser-sniffing, and send them different HTML that doesn’t reference the images.
Display the images via CSS instead of HTML (in style attributes if you like), using either background-image or :before/:after and content (not supported by IE 6 or 7), and wrap that CSS code in media queries so that it’s only displayed by devices with larger screens.
The only accessible solution right now is to wrap the image with <noscript> tags, then pull the image out later with javascript. Cookies don't work on first page load (HTMLPreloadScanner), nor with CDNs. Browser-sniffing is useless if your images aren't always 100% of the viewport.
Slimmage.js implements context-friendly responsive images in 3KB of vanilla JS.
The markup is pretty simple as well:
<noscript data-slimmage>
<img src="http://z.zr.io/ri/1s.jpg?width=150" />
</noscript>
Of course, you can make a server-side helper to even abstract this away.
If you don't mind a javascript dependency you could check window.innerWidth and insert image tags for sufficiently large screens.
Images would only be requested if javascript is enabled and the window big enough.
If you don't have any issues using additional JavaScript, then you may try THIS. I've stumbled upon it while searching and learning about media queries.
I'm building an editor where the content of a post is loaded in a div, and jQuery selectors allow me to edit the content inline.
I just ran into a bit of a hurdle as I was trying to add some responsiveness to the styling of the templates:
in my template stylesheets, I use a specific id of the preview area to specify where the style should apply. I apply the same id to the body tag of the viewing of the post so that both the preview in the editor and the full view of the post look the same.
I was putting in some media queries on the view side of things and realized that on the preview page, something like #media screen and (max-width: 640px) will behave differently because the preview does not take up the entire width of the screen.
Is there a way I can use a media query selector other than the width of the screen, but instead the width of an element.. or something equivalent?
Or could there be another way of mimicking that behaviour simply with javascript..
Unfortunately there is not currently a way for a media query to target a div. Media queries can only target the screen, meaning the browser window, mobile device screen, TV screen, etc...
Update (2018):
This is still a common problem for many developers. There is no way without javascript to query the size of an element. It's also very difficult to implement in CSS because of the 'cyclic dependencies' it causes (element relies on another to determine its size, element query causes size change in child which causes size change in parent which causes size change in child ETC...)
There is a great summary of the current element query landscape.
The go-to solution these days is the EQCss library https://github.com/eqcss/eqcss, or handling the changes within a javascript framework like React or Vue using a "CSSinJS" type solution.
My old and hilariously janky "solution":
For now I am using:
.preview {
zoom: .8;
-moz-transform: scale(0.8);}
when the .preview div is 80% of the page width. It's generally working, but with a few issues, and it is not entirely flexible since the divs in question will not always be set % of the page width.