media-queries

CSS div buttons not working on Iphone or Ipad

假如想象 提交于 2019-12-24 01:04:23
问题 I am working on a web base app for my school with different versions of CSS for handheld, tablet and desktop. I am using media queries for this. The app is almost done and it works correctly on almost all browsers and android. The app looks awesome on Iphone/Ipad however buttons do not work making the app useless in these devices. This is what I have: //Source code <div id="signinbutton" class="blue_button">Sign In</div> //desktop.CSS .blue_button { width: 130px; height: auto; padding: 8px;

Hide background image using Media Queries

孤街浪徒 提交于 2019-12-24 00:23:41
问题 I'm attempting to remove my background image when people view the site on mobile devices. Here's my code. HTML: <section id="Build"> <div class="img_contain col-xs-8"> <img src="assets/images/RockS_BG.png" "> </div> <div class="column-right col-xs-4 "> <h1>Build</h1> <p> BLA BLA BLA </p> </div> </section> CSS: #build { background-image: url('../images/buildbg.png'); margin: 0 auto; text-align: left; padding-top: 40px; background-color: #D89330; } Is it possible to hide a background image

Media Query and Android Device

杀马特。学长 韩版系。学妹 提交于 2019-12-23 21:58:29
问题 i developing my first hybrid app using html5+JQueryMobile + Phonegap...i'm testing the app on a Samsung w (android 2.3.3), on a Iphone 4s and on IphoneSimulator for the Iphone5... in the home page i'd like to use different background images for this devices...i'm trying to use the CSS Media Querys... /* IPHONE 4 - IPHONE 3*/ @media screen and (height: 480px) { #home { background-image:url(images/home/home_Med.png); background-size: auto 100%; } } /* GALAXY S1 - S2 */ @media screen and (width:

the 1px gap when using min and max with media queries

落爺英雄遲暮 提交于 2019-12-23 19:17:23
问题 I have been dealing with an issue with min and max width usage in the last few years with websites I am developing for the company I work for. Though I can easily get around this by just changing the breaking points, it annoys that I don't know why it is happening and I keep walking into this issue after the websites have had some modifications. So the issue is probably most know for the non-100% gap. This issue though is not related to screen zoom but rather just a breakpoint that isn't

HTML5 Boilerplate + Media Queries not working in IE8?

痴心易碎 提交于 2019-12-23 19:09:16
问题 Since Boilerplate has respond.js built-in, it should in theory be able to support following css: @media only screen and (max-height: 580px){.rnd-class{:height:200px !important;}} In FF and Chrome, it works as expected and the custom styles kick in after resizing the browser window. However, in IE8 the custom styles are always enabled - no matter how big the current browser window is. I was thinking that the problem is inside my code somewhere, but than I visited the Boilerplate mobile

Should I use CSS3 media queries to deliver different image sizes for retina display devices?

主宰稳场 提交于 2019-12-23 18:16:55
问题 Many similar questions have been asked here before. I believe mine is slightly unique. I have developed a mobile app with JQM + Cordova/PhoneGap. Originally I used big images (targeted towards retina display devices) and used responsive css to scale image down as needed. The problem with this approach that older devices end up having to download big images and these devices would not have the same processing 'grunt' that newer retina devices have - causing unnecessary overheads. I decided to

media queries / loading different image depending on screen size

99封情书 提交于 2019-12-23 18:11:15
问题 This might be basic but I'm getting lost in all the solutions I've managed to find on the web. I have a running website (www.webstalab.com) based on Twitter Bootstrap 3 but the image used (depicting two statues holding a ball) is quite big in size (around 900kb) therefore loads way too long on slower internet connections. The present photo is 1920 pixels wide, is responsive and it is not a background image. (I couldn't achieve the desired layout with the background image approach). All I want

Media queries to target high resolution dense pixel devices

怎甘沉沦 提交于 2019-12-23 18:04:14
问题 We're trying to target the Samsung Galaxy Nexus specifically. It has a resolution of 1280 x 720 with a pixel density of 2, which causes it to display pages as though it were a desktop device. We've tried @media screen and (max-device-width : 720px) and (-webkit-max-device-pixel-ratio : 2) and (portrait) {}; and @media screen and (max-device-width : 720px) and (-webkit-max-device-pixel-ratio : 2) {}; as well as a variety of other combinations. We can't seem to target this device specifically

Firefox versus webkit measurements for media queries based on width

泄露秘密 提交于 2019-12-23 12:26:38
问题 It seems that Firefox and Webkit browsers measure different things when using a max-width media query. While investigating breakpoints for a responsive design overhaul, I found that Chrome will include stylesheets at the expected width, but Firefox always included the sheet at a narrower than expected width. For example: <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" media="screen and (max-width: 480px)" href="/480.css" /> I would expect the width

Why does CSS rotation in media query not rotate back

倖福魔咒の 提交于 2019-12-23 10:58:12
问题 I have an SVG, in which some elements are rotated depending on a mediaquery, like this: @media (max-width: 480px) { rect { transform: rotate(10deg); } } The element rotates just fine, but (at least in Chrome) it refuses to go back. Why is that? Other directives, such as fill, work in both direction. JSFiddle: http://jsfiddle.net/MM3VC/1/ 回答1: I'm not sure why it doesn't rotate back but you could try this which goes back when the viewport gets wider rect { -webkit-transform: rotate(0); -moz