Desktop browser showing different than mobile
responsive-design,media-queries
I needed not only the flexbox prefixes but also the prefixes for all the different flexbox attributes. So I needed all of these mixins too: @mixin flex($values) { -webkit-box-flex: $values; -moz-box-flex: $values; -webkit-flex: $values; -ms-flex: $values; flex: $values; } @mixin flex-flow($values) { -webkit-flex-flow: $values; -ms-flex-flow: $values; flex-flow: $values; } @mixin...
Responsive Web Design without showing mobile layout when resizing desktop browser?
Technically it's done by forcing a min-width on your document, which will incur horizontal scrolling below that size, with: html { min-width: 1000px; } But you should only deliver such CSS if you a have a 100% guarantee that this site will be served only to desktops. That can't be...
using device width in media query
What if to do something like this in the media queries: body { width: @device-width + 270px; } Ideally main takes 100% of device-width, and sidebar shows on scroll....
Using rulesets in LESS for media queries
// Variables for MQ's @mq-mobile-portrait: 320px; // Mixins .mobile-portrait-only(@rules) { @media (min-width: @mq-mobile-portrait) { @rules(); } } Now you can use the following code: div { color: white; .mobile-portrait-only({ color: white; width: 100%; max-width: 500px; }); } The above will compile into CSS code as follows: div { color: white;...
Hide content on mobile using media queries
Take a look here: http://codepen.io/anon/pen/QbNJoY I used boostrap utility class to hide elements on xs and sm device (<768px of width using standard configuration) http://getbootstrap.com/css/#responsive-utilities...
Trying to get a website to zoom 120% when screen resolution is greater than 1600px
Try this: @media screen and (min-width: 1600px) { body { /* webkit browsers */ zoom: 120%; /* moz browsers , since there is no support to "zoom" */ -moz-transform: scale(1.2); -moz-transform-origin: 0 0 } } here is a snippet: @media screen and (min-width: 1600px) { body { /* webkit browsers...
How to Remove class or activate class for specific view port only
css,mobile,media-queries,viewport,tablet
you can do something like below. Add both big and normal class to the div. But keep the class hierarchy like this. First normal then big now you can say at a particular viewport, make the normal's font size with important value. <style> .big { font-size: 2em; } .normal {...
Why does a media query with a smaller min-width overwrite a larger one?
I know that 600px comes later in the CSS file which could be a reason This is usually the reason, aside from unrelated authoring mistakes or, worse, browser bugs. Anything that is greater than or equal to 768px is, by necessity, also greater than or equal to 600px, so...
Responsive Design: max-device-width, max-width and min-device-pixel-ratio
css3,mobile,responsive-design,media-queries
Hidpi only means that 1 css pixel is rendered with 3x3 actual pixels (this varies for devices, iPhone pixel density is 2- so on iPhone 1 css pixel is made from 4 actual LCD pixels.). Websites on galaxy s4 are still rendered as 360x640px with pixel density 3, so you...
Responsive Layout - Media Queries
html,css,responsive-design,media-queries
Ok, first of all I don't think I have ever seen anyone use as many breaks <br> tags on a single page as you have haha. The answer to your question is to simply use the <hr> tag (horizontal rule), wherever you want a line. For example after the closing...
CSS media-query to squeeze image into container
css,css3,responsive-design,media-queries
It's a better approach to change the order of your media queries in this case, plus regarding your image when the image-width exceeds the screen-width, it should shrink to fit on the screen. here what you need to do: add table-layout:fixed to your .mainTabWidth .mainTabWidth { table-layout: fixed; } .headerImg...
Is it possible to combine media queries for same CSS rules?
You don't have to add @media again in the second line. This should work: @media screen and (min-width: 768px) and (max-width: 990px), screen and (max-width: 630px) { .community-info-box { width: 100%; margin-right: 0; float: none; ... : ... } } ...
Responsive, 3 colums in deskview and 2 in mobile veiw
html,css,responsive-design,media-queries
I'm just going to give you 2 examples on how you can do this, because there is many ways to achieve what you want. using display:table and display:table-cell * { box-sizing: border-box; margin: 0; padding: 0 } section { display: table; width: 100% } div { display: table-cell; border: 1px...
Disable Hover on Mobile
html,css,responsive-design,hover,media-queries
Alright, you can't disable it, but you can not enable it. @media only screen and (min-width: 768px) { .desktopOnlyHover{ background-color:salmon; } } ...
Hide multiple Dropdown boxs using CSS for printing
The following solution is a combination of @Satpal and @General-Doomer 's answer to the question. Script <script type="text/javascript"> $(function () { $('select').filter(function () { return $(this).val() == ""; }).addClass('hidden-print'); $('select').change(function () { if ($(this).val() == "") { $(this).addClass('hidden-print'); } else { $(this).removeClass('hidden-print'); } }); }); </script> CSS class: .hidden-print{ display:...
Is it possible to detect if content inside a parent element is too wide to fit?
javascript,html,css,responsive-design,media-queries
Here is a very basic jQuery solution. var parent = $('.parent').width(); var child = $('.inline-list').width(); if(child > parent){ // Adjust accordingly // Maybe add/remove/change .inline-list class with $('.inline-list').addClass('.stacked-list').removeClass('.inline-list'); } ...
Responsive Design and onclick events
javascript,css,responsive-design,media-queries,inline-styles
Instead of directly manipulating element styles, you can add and remove class values in order to change element appearance. The rules for the class(es) can be affected by media queries because they'll go right into the stylesheet. Modern browsers provide the .classList API: function toggle_menu(id) { var e = document.getElementById(id);...
Mobile/Desktop media query not working on cell phone
For responsive pages you need to add a viewport tag which tells the device how to display the content: <meta name="viewport" content="width=device-width, initial-scale=1"> For your other question, the "request desktop site" won't work the way you have it set up. That feature is for if you have 2 separate sites(one...
css media query not working for Iphone (Chrome and Safari) / Apple MBP Safari
You need to use "-webkit-min-device-pixel-ratio" for Safari. See http://www.w3.org/blog/CSS/2012/06/14/unprefix-webkit-device-pixel-ratio/
Gulp - Sourcemapping less while combining media queries
less,media-queries,gulp,combine-media-queries
You should consider to use gulp-minify-css for your minify task (if you not already do) because of gulp-minify-css passes its options are directly passed to clean-css. clean-css does support media query merging now, see: https://github.com/jakubpawlowicz/clean-css/commit/6ed784a4aae91e5d7f48cf189c24095dfb8062cd...
When do we use media-queries “resolution” in css?
One real-world example usage is when performing printing of web document: @media print and (min-resolution: 300dpi) { ... } The above media query will display given styles when printing DPI is set at minimum of 300dpi....
Instafeed.js - Instagram script CSS Styling Not Applying To Elemements
You need to specify the template that instafeed.js should render. Currently it is removing your original markup: http://instafeedjs.com/ HTML <div id="instafeed"></div> Javascript var userFeed = new Instafeed({ get: 'user', userId: 1481598384, accessToken: '1481598384.467ede5.3870e3db231943d98eb5c12bc04b1463', limit: 10, template: '<a href="{{link}}" target="_blank"><img src="{{image}}" /><div class="likes">♥ {{likes}}</div></a>', after: function () { var images =...
css3 viewport : works on chrome simulator, not on android phone
html,css3,google-chrome,responsive-design,media-queries
I've pulled this answer from here. Try adding <meta name="viewport" content="width=device-width" /> in the <head> of your HTML document...
jQuery show a hidden DIV based on CSS element and slideToggle() state property
jquery,html,css,responsive-design,media-queries
I think for this scenario you can find a solution without using javascript: Use a hidden checkbox for the toggle element and then apply these style rules: For mobile devices show/hide the content based on the checkbox state. For desktop size always show the content. This example is based on...
Polymer 1.0 dom-if does not recalculate when previously true
Ok this was answered in a github issue I logged, and turns out there is indeed a way to tell the template it needs to "re-stamp" itself. <template is="dom-if" if="{{active}}" restamp="true"> <content></content> </template> It's actually very clearly documented [1]; I guess I was reading over the docs too fast just...
Cant use media-queries (with the css) directly in my asp classic code page
html,css,media-queries,stylesheet
Try to use double @@ symbols. That will escape @ symbol and render @media correctly on client side Source: http://stackoverflow.com/questions/7027469/media-media-query-and-asp-net-mvc-razor-syntax-clash...
How to properly join a few Media queries
yes, just put it together @media screen and (-webkit-min-device-pixel-ratio:0) { .logotext-n { color: #f1ecd6; font-family: "arial black", sans-serif; font-weight: 900; font-size: 210px; text-transform: lowercase; letter-spacing: -18px; } .logotext-u { color: #f1ecd6; font-family: "arial black", sans-serif; font-weight: 900; font-size: 210px; text-transform: lowercase; letter-spacing: 0; } } . . ...
CSS media queries - when is a px not a pixel?
css,google-chrome,internet-explorer,media-queries
I just tried your code in both Chrome (latest) and IE (11), and it works as it should be work. It breaks exactly at 1000px and 700px. Is your browser zoom on default? It is maybe a lame question, but it could be confusing, when your zoom is not the...
div css styling not responding to media query for width
Your css rule for '.footerbar li a' on line 2392 of your Style.css file is missing a closing brace. That is what is causing some of your media query css to be ignored. You have: .footerbar li a { padding-top: 15px; color: #CCCCCC; padding: 0px 100px 0px 0px; position: relative;...
Css id's don't change on media queries
You need to place the media query at the end of your stylesheet as that's the way the styles are "cascading" Currently your media queries are first, so anything after that isn't more specific is getting overwritten. ...Everything before... @media screen and (max-width:760px){ #verde{ color:red; } } Here's a JSFiddle...
CSS media query does not apply to Firefox 37
The issue appeared to be with using the modernizr JavaScript function, disabling this link resovled the issue.
Bootstrap 3 responsive design
twitter-bootstrap,responsive-design,media-queries
Bootstrap works mobile-first and so should you use it. You can add multiple classes to each column to make them look different on each size: <div class="row"> <div class="col-sm-6 col-md-3">X</div> <div class="col-sm-6 col-md-3">X</div> <div class="col-sm-6 col-md-3">X</div> <div class="col-sm-6 col-md-3">X</div> </div> This will result in: Mobile: | 100% | | 100%...
Media Queries div works but others do not
I see nothing referencing your #mobile div at all. Try these. /* Large desktop */ @media (min-width: 1200px) { #mobile{ display:none; }} /* Portrait tablet to landscape and desktop */ @media (min-width: 768px) and (max-width: 979px) { #mobile{ display:none; }} /* Landscape phone to portrait tablet */ @media (max-width: 767px)...
Change media query using Javascript
javascript,css,responsive-design,media-queries
Something like this could do the work. if(IsMediaA()) { $('<style />', { 'text': '@media A { display: block; }' }).appendTo('body'); } but it's a lot better to workaround with some state classes and style it property in css file: js: if(IsMediaA()) $('element').addClass('is-mediaA'); css: @media A { element.is-mediaA { display: block;...
How to disable mail modification in iOS Gmail app
ios,css,mobile,gmail,media-queries
OK, i found some solution. What i need was this: /* DO NOT REMOVE - mobile autofit converter disable - DO NOT REMOVE */ <div style="display: none; white-space: nowrap; font: 15px courier; color: #333333;"> - - - - - - - - - - - - - - - -...
CSS3 transform for smartphone don't work
html,css,html5,css3,media-queries
You can add a touch event for touch devices using javascript to add you class (and trigger the animation), i.e: var myElement = //get your element myElement.addEventListener('touchstart', function(e){ this.className = "hover"; setTimeout(function(){ myElement.className = ""; }, [animation duration]); }); You'd set the above animation duration to match the time of...
Why doesn't my site respond to the size of my browser window?
css,responsive-design,media-queries,viewport,meta
max-device-width should be: max-width Works, I tested it...
Div won't resize vertically in slideshow with CSS queries
html,css,css3,responsive-design,media-queries
In your .slidercaption you have a top:-200px which is causing the issue. Unlike margin, elements with position:relative won't physically move when you set a top or left style. That means the occupied space for that element will still remain on that position. So to fix that, remove top: -200px and...
CSS media query rules not being applied
css,responsive-design,media-queries
Move your media query below the inherited rules. The CSS parser will apply any rules that apply as it parses the document in order. You need your overrides to be parsed after the base rules. Update: As a side note, CSS doesn't support // comments, so the parser may be...
Internet Explorer media queries taking effect when they should not
html,css,internet-explorer,media-queries
Try putting the media-query after the normal class state. Also, you can try giving the non-media query a height as well. .calendar_head{ width: 100%; font-weight: 700; color: #6a7783; text-align: center; line-height: 30px; height: auto; } @media all and (max-width: 500px){ .calendar_head{ height: 120px; line-height: 60px; } } ...
Media queries not working (Zurb Foundation)
css,media-queries,zurb-foundation
@media #{small-up} { needs to be @media #{$small-up} { As $small-up is the variable you're trying to access which is set in the settings file....
Child class with same name
I am personally not very comfortable with re-using class names like in your sample. However, re-using the selector in Less to achieve your expected output is fairly simple. You can use the parent selector (&) like in the below simplified example. .r-slide-right-10 { color: red; & & { color: blue;...
Media Query styles not working
You could use display:table so the div will shrink to fit the content automatically. http://jsfiddle.net/Lb7ky6vL/ @media (max-width: 768px) { .headDiv .headPhone { float: none; display: table; margin: 0 auto; } } ...
CSS @import causes media queries class not work
html,css,css3,import,media-queries
I figured out why it was doing it my media queries were before my class in the style sheet... /* This doesn't work */ @media all and (max-width: 380px) { .class1 { width: 88%; } } .class1 { width: 300px; } . /* This works */ .class1 { width: 300px;...
CSS Media Query only works on browser resize (Chrome)
html,css,responsive-design,media-queries,window-resize
I fixed the issue. There was conflicting CSS: The top:20% was interfering with a button (image) that was set to bottom:10% So I put the button in a seperate div...
How to center images horizontally with text?
UPDATED I just edited your fiddle a bit and managed to achieve what you wanted https://jsfiddle.net/L7dz7d4b/2/ @media screen and (max-width: 623px) { #footer #group { padding-left:0px; max-width:100%; } #footer { height:1150px; } #footer #group #button { text-align:center; } #footer #group a #icon { width: 20px; height: 20px; margin: 5px; float:none;...
media query max-width not working
You have to write min-width Instead of min-device-width i think....
css media query doesn't work on Sony Xperia Z smartphone
Just put the following meta tag in the <head>: <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0"> hope that helps....
Media queries not working in IE8 - even with respond.js work-around
javascript,html,css,internet-explorer-8,media-queries
Set up the viewport. <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" /> Put the css in an external file and link to it. <link rel="stylesheet" href="/public/demo.css" /> And take out the only keyword and change to min-width. @media screen and (min-width : 773px) { //instead of (max-width:1320px) } And that should...
horizontally align image/content with media query
css,twitter-bootstrap,media-queries
JSFiddle You're targeting the wrong elements. Your container doesn't need to be pushed to display: inline-block or floated. The elements within it do: @media (max-width: 991px), (max-height: 460px) { .col-md-2:hover{ background-color: transparent; } .col-md-2 img { float: left; } .col-md-2 { overflow: auto; } } ...
Media Query Margin Fail
Your media query is malformed. It should be: @media only screen and (min-width:768px) and (max-width: 1024px) With emphasis on only screen instead of screen only....
Why don't elements display inline-block again after a resize down and up in Chrome?
html,css,google-chrome,responsive-design,media-queries
Hope this helps. http://jsbin.com/bakujusaxu/1/edit?css,output /* SOLUTION HERE The following elements are being treated as a "clearfix" type of thing, so when you re-size from "mobile" to "desktop" the fixed position elements are being treated as "block", as they happen to be intersected elements, it gives the stacked result... */ @media...
How to make my nav bar responsive
This should work: @media only screen and (max-width: 600px) { (...) } Note that IE8 and below don't support media queries....
Media queries don't work in Blogger
html,css,css3,media-queries,blogspot
Looks like the problem is the comment tag . Maybe blogger doesn't support this comment writing style. Now the problem is solved since I got rid of them!
What is wrong with these SCSS media queries [duplicate]
twitter-bootstrap-3,sass,media-queries
To make it work modify the element inside the @media query not the variable. So for example... $navbar-height: 60px !default; body { padding-top: 70px !important; } @media(min-width: 768px) { .nav-bar: $navbar-height + 10px; body { padding-top: 80px !important; } } @media(min-width: 992px) { .nav-bar: $navbar-height + 20px; body { padding-top:...
Does 'all' add anything to a media query?
Yes it does and by default it's set to all. All devices listen to this Available media types: all: All devices listen to this braille: Used for braille tactile feedback devices. embossed Used for paged braille printers. handheld Used for handheld devices (Smartphones and tablets do NOT listen to this!)....
Responsive html div elements?
html,css,responsive-design,media-queries
I would do something like this unless you actually need to apply an ID, classes are easier for multiple divs with one assignment in css, plus they take up less space. html--- <div class="wrapper"> <div class="third">Something here</div> <div class="third">Something here</div> <div class="third">Something here</div> </div> css--- .third { width: 33.333333% float:left;...
i am looking to apply media queries through javascript
Look at the documentation for matchMedia at https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia. It returns a "media query list" on which you have to access the matches property: case window.matchMedia("screen and (min-width: 450px)").matches: ^^^^^^^^ I don't know what varmql is, but it would seem you should replace it with true. But as a commenter mentioned,...
Responsive issue. Websites remains big while elements scale
html,css,wordpress,mobile,media-queries
You first need to specify the viewport in your <head> area. This will make the responsiveness come into effect properly. <meta name="viewport" content="width=device-width, initial-scale=1"> Read more about viewports here: MDN Along with that, there seem to be a couple of elements that you need to add to your responsive CSS...
Mobile css loaded on chrome inspector but not working on phone
html,css,mobile,responsive-design,media-queries
Did you use the viewport meta tag ? Like this one: <meta name="viewport" content="width=device-width, initial-scale=1"> https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag...
Parse Error CSS3 Validation
css,css3,media-queries,parse-error
You aren't closing the tablet styles @media with a }. /* Tablet Styles */ @media only screen and (max-width: 1049px) { .primaryContainer { background-image: url(../img/shattered.png); } #logo_container { width: 100%; margin-bottom: 12px; } #contact_info_box { width: 100%; } #about_me_box { width: 100%; padding-right: 10px; padding-left: 20%; background-size: 60%; background-position: left...
Media Query phone pixel width does not match screen resolution
First of all, take a look at this chart chart here. In the terms of that chart, this happens because iPhones (and other phones as well) render points to the several rendered pixeles (so called "device-pixel-ratio"). Sometimes it even gets a little more confusing, because some devices uses upsampling or...
Colspan modification dependent on CSS3 @media Query
javascript,html,css3,responsive-design,media-queries
It is possible to do that with JavaScript. What you only need is to have some class which adds some specific CSS to your element for your media query. Then you can detect changes of CSS by JavaScript and change the colspan. (inspiration has been taken here) 'use strict'; $(document).ready(function()...
Align to center child DIVs inside parent DIV
html,css,css3,responsive-design,media-queries
try this: @media screen and (max-width: 768px) { .display_type, .buttons, .products { float:none; margin:auto; } } ...
How do you force a website to be in landscape mode when viewed on a mobile device?
css,asp.net-mvc,mobile,responsive-design,media-queries
Short answer, you can't and you shouldn't control a user's OS behaviour via a website. You can display a warning using the answer on the following question: forcing web-site to show in landscape mode only Or you can force your layout to look like landscape even in portrait mode using...
CSS Media Query that Covers Most Mobile Devices
css,responsive-design,media-queries
I think you might be approaching this from the wrong angle. When doing responsive design you shouldn't be concerned with specific screen sizes of different devices, you'd go mad trying to code for all the exceptions. Just concern yourself with the layout of your page at various pixels widths. If...
@media Orientation Width
css,media-queries,screen-orientation
The width that is used will be the current width of the viewport. If the orientation rotates, the current width will change to be the width of the rotated device (or, the height of the device in portrait mode). You can specify the orientation, using orientation: landscape. See here for...
Css media queries quesitons
hi there this is your css #art { background: rgba(0, 0, 0, 0) linear-gradient(to bottom, #4c4c4c 0px, #595959 12%, #666 25%, #474747 39%, #2c2c2c 50%, #000 51%, #111 60%, #2b2b2b 76%, #1c1c1c 91%, #131313 100%) repeat scroll 0 0; color: #fff; font-weight: 400; height: 572px; padding-left: 80px; padding-right: 200px; }...
how to show css in current @media query in Firefox
Firebug up to version 2.0.x doesn't have that feature implemented. It is requested in issue 5196. The Rules side panel within the Firefox DevTools does show the @media query, though. To get them displayed uncheck the option Show original sources within the options panel. As upcoming versions of Firebug will...
Why is bootstrap changing a col-md div to 100% width @max-width:991?
css,twitter-bootstrap,media-queries
Bootstrap 3 is mobile-first, meaning everything is handled as if it's on a small device unless you say otherwise. To change the breakpoint of your columns, use a smaller prefix: col-xs-2 or col-sm-2 http://getbootstrap.com/css/#grid Also, instead of inline styles on your images (yuck), use Bootstrap's responsive image class: class="img-responsive" http://getbootstrap.com/css/#images...
How to use media query with div as screen for mobile preview in desktop website?
html,mobile,media-queries,screen-size
HTML <iframe src="link-to-the-site-you-want-to-demo.html"></iframe> CSS iframe{ /*your phone dimensions here*/ height:640px; width:320px; } ...
How to get a SASS nested nested media query to work with the use of the media query or operator
This appears to be a hyper-specific case that appears is part misbehavior in Sass and part ambiguous expectations. Sass handles nesting combined with comma delimited media queries without problems... until you start specifying a display type on both the inner and outer query: /* without `screen` */ .foo { @media...
How to make smooth media-query transition back and forth?
media-queries,transition,css-animations
Ok finally made it work after playing around and researching a bit. Once I learned to control animation with delays on both sides it became easier. .wrapper { width: 500px; background-color: #0C6; } .nav { background-color: #69C; } .logo { height: 0px; background-color: #FC3; visibility: hidden; opacity: 0; -webkit-transition: visibility...
One vendor prefix inside a different vendor prefix
css,css3,media-queries,vendor-prefix
Looks like a careless mistake. There are no known implementations of Gecko that recognize -webkit-min-device-pixel-ratio — the prefix that Gecko uses is min--moz-device-pixel-ratio1 instead, which has since been deprecated in favor of the standardized resolution. And there are no known implementations of WebKit or Blink that recognize :-moz-placeholder. Either way,...
css media queries, one or many for mobile optimization
They both do the same thing the only thing that makes the second approach better is that you are not repeating yourself. You are keeping the code DRY and everything is located in one spot for working with that media query. Plus rewriting @media screen every time would be a...
DIV 2 on top of DIV 1 when resizing
I think you can achieve what you're looking for with a CSS grid like Bootstrap has. Check the following fiddle: http://jsfiddle.net/nunoarruda/156trje7/ <div class="container"> <div class="row"> <div class="col-xs-12 col-sm-6 col-sm-push-6 div2">DIV 2</div> <div class="col-xs-12 col-sm-6 col-sm-pull-6 div1">DIV 1</div> </div> </div> I've used the Bootstrap CSS grid and the push/pull classes to...
Changing image via media queries
to avoid loading the image twice (not using normal css mediaqueries) you could use window.matchMedia (JS); var breakpoint = window.matchMedia( "(min-width: 400px)" ) if (breakpoint.matches) { // window width is at least 400px // you load one img } else { // window width is less than 400px // you...
div positioning is off when changing visibility
Your #tablet-phone p { margin: 0 auto; } is overriding the vertical margin in your #contact p { padding: 1em 2em; margin-top: 1em; } And so the non-link paragraph is taking up less vertical space than the link paragraphs, and the vertical alignment is going bottom-up, so the icon moves...
When scaling menu comes behind the div, why?
I fixed it. I remove the float:right and replaced it with text-align:right.
Media Queries - Target iPhone 6/ 6 Plus without older iPhones
javascript,iphone,css3,media-queries
I guess there is not a CSS3 solution to this question? Most Media Queries will conflict. I have decided to answer my own question with a JavaScript approach. I hope it helps. This will cover most scenarios. You can then add different styles for each added class. The width checks...
elements not going to proper position switching from portrait to landscape ipad
html,css,html5,css3,media-queries
I wondered that if the problem you said related to font size changes, try adding this line into your CSS, if that helps. body { -webkit-text-size-adjust: none; } Edit: Problem might actually related to position: absolute; without set specific positions, and it gets confused when switching orientations. Try add this...
Media query not triggering
The CSS isn't working because its not contained with-in style tags. <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <style type="text/css"> <!-- body {background-color:black; overflow:none;} --> @media (min-width:641px) { body { background:white;background-image:url('http://lib.store.yahoo.net/lib/oberers-flowers/Home-Background-2013a.gif');} div.desktop {visibility:hidden; } } </style> </head> <body> <div class="desktop"...
How to make page layout responsive for every successive little change in window size?
javascript,css,responsive-design,media-queries
Combination of media queries and elements that can look good at different sizes. One technique is using background-image that are sized to cover. This one uses no media queries: #menu { height: 50px; background-color: green; } #footer {height: 50px; background-color: blue; } #middle {height: calc(100vh - 100px); background-image: url(http://placehold.it/200x100); background-size:...
Standard resolution sizes to optimize for
css3,responsive-design,media-queries
Instead of designing "for screens", I would challenge you to use this method: Design breakpoints around your content, rather than fitting your content to screen sizes (which change all the time). Start small, what's the best way to access my content on a small screen? Once you have that to...
how to check if condition on resize of the browser?
javascript,jquery,media-queries
Instead of showing and hiding elements directly from Javascript, change your JS code to add a CSS logged-in or logged-out classes to a container element. You can then use CSS selectors with that classname, in and out of media queries, to specify your four states: @media (max-width: 640px) { .logged-out...
Chrome applies height property of media query only on refresh
css,google-chrome,height,media-queries,refresh
If, as you say, this problem is only encountered on chrome when you resize the window, it is most likely a problem with Chrome rather than your code.
Table Widths Strangely Shrinking on Mobile
On the table tags, don't use display: block; because it already has a display: table; that it uses to format it correctly.
Why is @media changing body properties?
Your semi-colon at the end of your media query is invalidating the body selector! Just remove that so you only have the closing brace. EDIT Semi colons in CSS are only valid at the end of an attribute property, other than that its just curly braces all the way...
Media query making element behave strange
Option #1, remove .clear-fix:after from #topics-button-wrapper Demo Option #2, remove floats from buttons Demo Option #3, remove .clear-fix:after and add overflow: hidden; Demo Option #4, add display: block; and overflow: hidden; to .main-topic Demo ...
Div Text's Color Changes when Printed
html,css,css3,media-queries,media
MDN Docs: Adding this below rule will overwrite the user's printer property settings. @media print { .myid_print_duo_name { /* Replace class_name with * to target all elements */ -webkit-print-color-adjust: exact; print-color-adjust: exact; /* Non-Webkit Browsers */ } } ...
Sass breakpoint doesn't work
sass,media-queries,compass-sass,breakpoint-sass
That's because you're using the mixin incorrectly. The breakpoint mixin is a @content aware mixin, the styles intended for that mixin need to be placed inside curly braces: body{ @include breakpoint(100rem) { background-color: #000; } } Output: @media (min-width: 100rem) { body { background-color: #000; } } ...
initial-scale = 1.0 + width= device-width not fitting the whole screen on any mobile
mobile,responsive-design,media-queries,viewport,initial-scale
The problem is the main container which has a fixed width, instead of adaptive width based on screen. My guess is that the theme is crap! Here's a fix: *, *:before, *:after { margin: 0pt; padding: 0pt; box-sizing: border-box; } .content-pad { width: 100%; } To be more specific, you'd...
Differentiating portrait and landscape versions in media queries
We have to add orientation: portrait and orientation: landscape to your media screen. iPad Landscape and Portrait /* iPad Portrait */ @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 1) { /* ur CSS */ } /* iPad Landscape */ @media only screen and...
i want the nav buttons to appear below the logo in the mobile view with auto centering
html,css,html5,css3,media-queries
Remove the floats for .header-logo and .nav on the mobile CSS and add margin:0 auto; to whatever you want to be aligned. I've also made a few changes, check out the whole CSS code and also online example below: http://jsfiddle.net/tv5k14yr/ header{ position: fixed; top:0px; width: 100%; background-color:#0165ba; font-family: 'Arvo', serif;...
Retina pixel density and CSS overflow-y
html,css,jquery-mobile,media-queries,retina
We were able to fix the rendering issue by forcing GPU rendering. Adding the rule transform: translate3d(0,0,0); to the selector worked!