media-queries

Default CSS overriding media query

由 时光总嘲笑我的痴心妄想 提交于 2019-12-18 07:28:30
问题 I'm getting this from Chrome ADB plugin, connecting to my phone via USB. Basically allowing me to inspect elements on my android chrome and view or alter them on my connected PC. I am getting this strange issue. I thought media queries were to overrule generic class rules, but if you see this image you can see that the media query rules are being overridden. I COULD fix this by adding !important but I would rather not, I also realize that the rule for non-media-queried container h1 is

CSS transform not working IE

由 穿精又带淫゛_ 提交于 2019-12-18 05:48:07
问题 I have this stylesheet .rotate div img { -webkit-transform: translate(-18cm, 2cm) rotate(-90deg); /* WebKit */ -webkit-transform-origin: top right; -moz-transform: translate(-18cm, 2.5cm) rotate(-90deg);/* Mozilla */ -moz-transform-origin: top right; -o-transform: rotate(90deg); /* Opera */ -o-transform-origin: top center; -ms-transform: translate(-18cm) rotate(-90deg); /* Internet Explorer */ -ms-transform-origin: top right; -sand-transform: translate(-18cm, 2.5cm) rotate(-90deg); -sand

Print media queries being ignored in Chrome?

由 十年热恋 提交于 2019-12-18 05:47:08
问题 I'm creating some print specific styles using the following: @media print { /* Styles */ } As we are using SASS all the styles get compiled into one stylesheet, styles.css at runtime, which is declared in the <head> of the document as follows: <link rel='stylesheet' href='/assets/css/styles.css'> Now when I print from chrome (Ctrl+P), it completely ignores my print styles but Firefox (30.0) is fine. IE(11) is terrible but this is because we have a lot of show/hide panels which IE doesn't seem

Run javascript/jquery only on screen media, not print

由 随声附和 提交于 2019-12-18 05:46:11
问题 How can I run a jquery function only on @media screen ? Background: I have a screen.css stylesheet and a print.css stylesheet. I have two javascript functions, one of which I do not want to run on the printed version want of the page. 回答1: Any script would be ran when the page loads, so using if (Modernizr.mq('only screen')) {$('h1').text('media screen');} is pointless as it runs your script while you're on @media screen . Instead, you have to detect whenever the media query changes, and

Nesting CSS @supports and @media queries

由 独自空忆成欢 提交于 2019-12-18 02:03:07
问题 I have been trying to figure out whether it's possible to nest CSS feature queries (also known as “CSS @supports ”) and regular media queries, and what would be the correct way to do it. Example A shows the feature query inside the media query. Example B shows the media query inside the feature query. Is it even possible to nest them at all? If so, is there a preferred nesting style? A or B? .foo { background: red; } /* EXAMPLE A */ @media (min-width: 50em) { .foo { background: green; }

Bootstrap navbar collapse media-query on custom width

由 一世执手 提交于 2019-12-17 23:32:52
问题 Helo guys, I want to modify the navbar in order to collapse on @screen-md :992px; . I have modified navbar.less , but still not working and I don't know what to do. So how can I modify the @grid-float-breakpoint variable in order to have that menu collapsed on custom media query size? FIDDLE: 回答1: You can change the collapse point in 3.1 like this.. @media (max-width: 992px) { .navbar-header { float: none; } .navbar-left,.navbar-right { float: none !important; } .navbar-toggle { display:

Why does `not (some-width: Xem)` media query never fire?

由 别等时光非礼了梦想. 提交于 2019-12-17 21:14:03
问题 I'm trying to negate the max-device-width media query (the reason for this is I don't won't both (max-device-width: X) and (min-device-width: X) to fire if the device has precisely that width). Unfortunately, the not (min-or-max-some-width: X) media queries never fire. Here's a small fiddle. I expect two yellow lines on the desktop and two red lines on mobile. What I get is only one yellow line on the desktop (the last one) and only one red line on mobile (the first one). What am I doing

Continuously adjust element size as screen size changes

由 懵懂的女人 提交于 2019-12-17 21:09:26
问题 Is there a way to use media queries to change the value of a CSS property gradually as the screen changes size (continuously/smoothly). Instead of setting a bunch of break points at which there is a change (step-ly)? Like on this site: http://www.bluegoji.com/? The margins of the <a> tags in the <ul> at the top of the page (navbar) decrease continuously as you narrow the browser window. That is the behavior I am trying to achieve. Or is the solution just to use so many media queries that it

Exact NOT(Inverse) of CSS Media Query

由 本秂侑毒 提交于 2019-12-17 19:59:07
问题 What is the exact "NOT" of the following CSS media query ? @media only screen and (device-width:768px) Just to add, it would mean..All EXCEPT iPAD...OR.....NOT iPAD.. and BTW...I have already tried @media not only screen and (device-width:768px) which does not work.. 回答1: @media not screen and (device-width:768px) not and only are mutually exclusive in media queries; only is needed only to work around some downrev UAs who implement the HTML4 algorithm for media strings, so when the query

“background-size: cover” does not cover mobile screen

由 柔情痞子 提交于 2019-12-17 18:28:17
问题 I have a photo background on my site using background-size:cover . It works for the most part but leaves a weird ~30px white space on my Galaxy S3 in portrait mode. I've attached a screenshot. The 1px teal line is to illustrate the entire screen. Seems like the background stops right after the social media ul s. I tested this by removing the ul and the background attached it self to the bottom of the tagline text. Also, here's my CSS pertaining mobile portait view: @media only screen and (max
订阅 media-queries