media-queries

问题 I have a slight issue, keeping the content in my carousel in place when i increase my screen size beyond 1200px content pushes to the left hand side of the screen click here I've nested the carousel in it's own wrapper and given it the following css properties .carsousel-container{ position: relative; width: 100%; } .carousel{ max-width: 1000px; width: 100%; margin: 0 auto; min-width: 320px; position: absolute; } .carousel-bg{ margin-top: -542px; } .left-side{ margin: -487px 40px; } #shots

问题 I have just a couple tweeks to make my website work on an iPad iPhone, just need to change some margins and some fonts sizes. I found this tutorial online that said to add this code: <!--[if !IE]>--> <link type="text/css" rel="stylesheet" media="only screen and (max-device-width: 480px)" href="css/style_ipad.css" /> <link type="text/css" rel="stylesheet" media="only screen and (min-device-width: 768px) and (max-device-width: 1024px)" href="css/style_ipad.css" /> <!--<![endif]--> so I added

问题 I want to make my text change color when the window size gets below 600px: jsfiddle: http://jsfiddle.net/LgsXT/1/ text: <div class = "derp">derp derp derp</div> css: .derp { color:red; } @media (max-width:600) { .derp { color:blue; } } But it's not doing anything. What's wrong? 回答1: You need a px or other unit for the @media rule. Also, watch those spaces in your HTML, and I would suggest you work up instead of down in screen-size <div class="my-box">Derp</div> .my-box { color: red; } @media

问题 When using media queries, only the first set seems to work and I don't know why. If I swap them around, then still, only the first one works. I've tried changing from max-width to min-width, I've tried removing the and condition, I've tried removing all my Javascript. I've tried removing all my CSS, having only the media queries with body {display:none}. The media queries are at the end of my stylesheet. Viewport meta is correct (see below). None of these attempts corrected my problem. Anyone

问题 I've tried to fix this for hours and i'm pulling my hair out, no matter what i do it refuses to call the CSS in the media tag the instant i add max-width or min-width. To test, i made the media tag make the body red and reduced min-width to something ridiculously low. Nothing happens. If i leave the screen tag and nothing else, it calls it CSS: @import url("reset.css"); @charset "iso-8859-1"; @font-face { font-family: cooper; src: url('../resources/CooperBlackStd.otf'); } @media screen and

问题 I have the following stylesheet link code inside my index.html document's head: <link href="static/css/mobile.css" rel="stylesheet" media="screen and (max-width: 739px)"> However, on my 1920px wide screen both chrome and firefox loads mobile.css - it appears to ignore the contents. It just about doubles the amount of time it takes to render the page. Is there any way to prevent the CSS file from loading if it fails to meet the media query? (I suppose I can live with some .js) Or have I

问题 I am adding the below media query directly to a style sheet to my webpage: @media screen and (max-width: 480px) { background-color:red; } So I am making the background colour change to red if the media type is screen and its maximum width is 480px. However Notepad++ is not picking up the media query as a CSS feature, it doesn't show in the colours as its supposed to. Any suggestions? 回答1: You want @media screen and (max-width: 480px) { #content { background-color:red; } } https://developer

问题 I've read several of the questions on here as well as Google looking for stuff and I found a lot bu tfor some reason I can't get mine to work for iPads. I was able to get it working for iPhones but the iPad is still displaying my bg img. These are all the queries I've tried and came up empty handed. @media only screen and (min-device-width: 481px) and (max-device-width: 1024px) { body.custom-background { background-color: #FFFFFF; background-image: none; } } @media only screen and (min-width:

问题 I have a website which looks perfect on the desktop view. I have created the fiddle as well so that its easy to make changes. The snippets of CSS codes which I have used in order to align the squares in a row are: .squares { display: flex; justify-content: space-between; align-items:center; padding: 1rem; flex-wrap: wrap; } .squares .square { width: 13%; text-align: center; height: 150px; padding-top: 1%; padding-left: 1%; padding-right: 1%; border-style: solid; border-width: 3px; border

问题 My website behaves responsively, so why are there horizontal scroll-bars ? I am confused by this! What does it take for the horizontal scrollbars to disappear? Also, the header doesn't shrink at the 320px mark on mobile devices, even though it does it when tested in the code editor....??? Here is the link to my CodePen: https://codepen.io/IDCoder/pen/Xevyqq Here is my HTML code: <html> <title></title> <head><meta name="viewport" content="width=device-width, initial-scale=1"></head> <body>