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.
Related
I want to apply media query only when page scrolled xxxx pixels down Is there any way I can do that with media query without JS?
UPDATED
The reason I am asking because none of JS plugins based on offset position are working on iPad, iPhone and Safari, they are not calculating offset properly Fixed position delayed on IOS and Bootstrap scrollspy not working on iPad
So I thought may be I can do that with media query if it is possible.
No you can't do that with a media query, media queries are used to test screen sizes for responsive web design.
You're going to have to use javascript to check scroll position then apply the media query accordingly.
you could use twitter bootstrap scrollspy method: http://getbootstrap.com/javascript/#scrollspy
This isn't possible with Media Queries, but you are able to do this with JavaScript. If you're having issues with ScollSpy maybe take a look at Waypoints. This works on mobile and is an incredible library to have in your toolbelt. This will let you react to the user's scrolled position.
I want to apply a class on image elements, but only for those which got a landscape format.
So, I want to know if there is a way to select images on my html, having a width/height ratio greater than 1, just like the media queries do with the "device-pixel-ratio" filter.
I actually do this in Javascript, but this can be better to do it in css (or with css framework like less/stylus/sass etc..)
Thanks for your help
Media queries inspect the user's screen properties, which is why it can select for screen width and even retina displays. To read the properties of the images themselves would not be possible in LESS or CSS.
LESS and its compiler, whether client-side or server side will just compile to CSS so there's nothing inherent in LESS that will read your HTML, let alone images.
CSS would get you closer, but reads your HTML semantically, not looking at the inner properties of media elements like images or video.
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 have seen the option of loading different css files[called responsive web designing] for different screen sizes. But I want to know if there is some other way through which I can keep the CSS uniform.
I have to adjust the width of a title bar that should be of the same size as browser window with some margin-right
<toolbar width="some px value" margin-right="some px value">
I need some spacing at the end of the browser screen
Can I somehow get the current width of the browser screen and thus adjust my titlebar accordingly
"toolbar" defaults to being displayed as "inline". Try using "block". See this fiddle.
But I don't think "toolbar" is a valid html tag-name (I might be wrong). In any case old versions of Internet Explorer have a hard time figuring out what to do with certain tags (like most new semantic html5 tags) and won't apply any css to them.
If you feel the need to use new semantic tags and still need legacy browser support I recomend using Modernizr. Including it at the top of your page will use a small browser hack to get support for these tags even in old browsers.
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.