media-queries

css positioning issue with jquery slider

蹲街弑〆低调 提交于 2019-12-11 20:24:42
问题 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

CSS stylesheet that targets iPhone iPad not working

巧了我就是萌 提交于 2019-12-11 19:49:57
问题 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

Media query: how to make text change color when window width gets below 600px

心已入冬 提交于 2019-12-11 19:31:28
问题 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

Only first media query working

血红的双手。 提交于 2019-12-11 19:29:19
问题 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

CSS media queries min-width/max-width not being called

一世执手 提交于 2019-12-11 19:14:26
问题 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

css file always loads despite failing to meet media query

送分小仙女□ 提交于 2019-12-11 18:38:29
问题 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

CSS3 Media Queries not working in Notepad++

妖精的绣舞 提交于 2019-12-11 16:39:16
问题 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

iPad conditional CSS isnt working

杀马特。学长 韩版系。学妹 提交于 2019-12-11 16:32:46
问题 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:

How to horizontal scroll square boxes in a mobile view in html/css?

那年仲夏 提交于 2019-12-11 15:48:15
问题 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

Why Are There Horizontal Scrollbars on My Responsive Webpage

情到浓时终转凉″ 提交于 2019-12-11 15:07:01
问题 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>