media-queries

SCSS @extend inside media query alternatives to avoid duplicate properties

由 时间秒杀一切 提交于 2019-12-12 05:26:57
问题 In SCSS , you can use @mixin and @extend to reuse code. For example: %even-row { background: pink; } @mixin even-rows-mixin($columns) { @for $i from 1 through $columns { &:nth-child(#{2 * $columns}n + #{$i + $columns}) { @extend %even-row; } } } li { @include even-rows-mixin(8); width: 12%; } Will generate: li:nth-child(16n + 9), li:nth-child(16n + 10), li:nth-child(16n + 11), li:nth-child(16n + 12), li:nth-child(16n + 13), li:nth-child(16n + 14), li:nth-child(16n + 15), li:nth-child(16n + 16

css3 media query not working in IE below ie10

由 寵の児 提交于 2019-12-12 05:26:41
问题 I have created a responsive email template and the problem is media queries are not working in below IE10 browser. I have used js library to make it run but it is not working. <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style type="text/css"> @media screen and (max-width: 600px) { /*widths for standard blocks*/ table[class=w15], td[class=w15], img[class=w15] {width:15px

Is this a VALID and correct way to set up media queries?

由 拟墨画扇 提交于 2019-12-12 04:57:18
问题 <link id ="style" rel="stylesheet" type="text/css" title="other" href="regularStyles.css" /> <link rel="stylesheet" media= "all and (mid-width: 767px) and (max-width:2049px) and (min-height:767px) and (max-height: 1538px)" href="notePads.css" /> <link rel="stylesheet" media= "all and (min width: 319px) and (max width: 1281px) and not desktop and not (width: 352px; height: 416px) " href="NormalTouchPhones.css" /> Is this a VALID way to set up a stylesheet (NormalTouchPhones.css) targeting all

Set CSS class equal BootStrap class with media query [duplicate]

由 做~自己de王妃 提交于 2019-12-12 04:49:51
问题 This question already has answers here : Bootstrap 4 responsive button size (2 answers) Closed 2 years ago . Hoping this is a simple CSS question. I have the following BootStrap button which I want to make smaller for smaller screen sizes (see below). In essence I what to change the class to "btn btn-default btn-xs " <button type="button" class="btn btn-default btn-sm" id="myButton" > <span class="glyphicon glyphicon-envelope"></span> </button> I assume I have to use a media query. Can I

Why media queries not using the correct CSS

由 前提是你 提交于 2019-12-12 04:45:51
问题 I have the following HTML: <div class="section group"> <div class="col span_1_of_3 articleTeaserBoxColor"> <div class="test2n"> <div class="imgHolder"><img id="NewsArticle_2790_image" class="imgArtThumb" title="" alt="" src="artOne.png" /></div> <div class="textHolder"> <div class="textHolderTop"><a href="/template.aspx?id=2790" class="" title="">Care on the Fast Track</a></div> <div class="textHolderBottom">The National Cancer Institute</div> </div> </div> </div> <div class="col span_1_of_3

Only certain elements responding to media queries

由 て烟熏妆下的殇ゞ 提交于 2019-12-12 04:37:24
问题 I'm working on a site and I'm trying to use multiple media queries: big screens, medium screens, small screens. I have a single stylesheet for the page and following the overall styling I enter the media queries: @media only screen and (min-width: 1135px) @media only screen and (min-width: 751px) and (max-width: 1134px) @media only screen and (max-width: 750px) Certain elements from the 751->1134 respond while others do not (they follow the default styling). Nothing from the <750 changes The

Responsive table with headers

由 不羁的心 提交于 2019-12-12 03:48:50
问题 I've tried to render a responsive table layout so that it shows a line of 12 columns on a desktop per each record of a table, 3 lines of 4 columns on a tablet and 6 of 2 cols on a smartphone. What I've already done is to define a CSS3 with media queries and a demo html table The issue is that - with the current implementation - the headers are always on top while I'd like to show them together with the cell values for small width views (smartphone/tablet), but I've no idea how to achieve this

Media Query not responding to changing browser size on desktop

由 江枫思渺然 提交于 2019-12-12 03:07:11
问题 My media query just won't work, can anyone see what I've missed? I've tried adding: !important; after media query css declarations adding css ancestral specificity to media query css declarations No luck. I have the meta viewport tag in the header. Here's my html: <!DOCTYPE html> <html lang="en"> <head> <link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700,700italic' rel='stylesheet' type='text/css' /> <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />

Exclusive Aspect Ratio Media Query

由 ε祈祈猫儿з 提交于 2019-12-12 02:56:57
问题 I want to have a picture at the side of my site only if the browser width is >1200 px, but I want to use one of two pictures depending on the aspect ratio. I suppose I need to use @media all and (min-width: 1201px) and (min-aspect-ratio: 8/5){ #div {background-image:url(pic1.jpg);}} @media all and (max-width: 1201px) and (max-aspect-ratio: 8/5){ #div {background-image:url(pic2.jpg);}} However I worry that if the window is exactly 8:5, the user will have to download both images. Any help on

Media Queries not working in Chrome, works in Firefox

由 会有一股神秘感。 提交于 2019-12-12 02:55:58
问题 I have a whole range of stylesheets that are specific to many different resolutions. I link to them using references in the header, such as: <link rel="stylesheet" media="(min-width: 1024px) and (max-width: 1024px)" href="http://site.com/child-theme/1024.css" /> In Firefox they work without a hitch, but in Chrome (and possibly Safari) it doesn't honor the media queries, even though it clearly detects/sees them as they are viewable in Firebug, however they are crossed out. Can't for the life
订阅 media-queries