Responsive Design: max-device-width, max-width and min-device-pixel-ratio

Tag: css3,mobile,responsive-design,media-queries

I am currently on an website which needs to be fully responsive in screen width and pixel density. My major problem is how do i get the responsiveness for HiDPI devices such as the galaxy s4.

I have read about the min-device-pixel-ratio but I do not fully get it and my attempts do not work. All my less/css is using rems as units, so basically I should be able to just manipulate the font-size ond the html tag, to get what I want, right? But maybe this is bullshit?

However, I wanted to ask for best practises and tips and tricks. Whats important to me is, that I don't have multiple versions or subdomains for desktop and mobile devices. I want to do it all with media queries.

Thank you very much in advance. I really appreciate your help!

Cheers

Best How To :

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 don't need any additional css for HiDPI devices.

you only need to add this meta tag in year head section

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

and apply css as for regular non HiDPI device.

CSS Nav Menu Fade Out OFF Hover

html,css,css3,navbar

Natalie is absolutely right, transitions are the way to do this. The only bits that need a change are your CSS for the /*Drop Down Container*/ and the /*Drop Down On Hover Action*/ Rather than hiding the divs with display: none; hide them with opacity: 0; then set an opacity...

Two div side by side in one container css

css,css3

Remove top: 0;right: 0;position: absolute; to stop your .image from being positioned absolutely so that the text does not overlap it. alter your width's to match so that P doesn't take over the width. also add vertical-align:top; to keep items to the top. see bellow .conteiner { position: relative; }...

CSS :hover that shows more than one image

html,css,css3

Okay so I have got a probable solution, the catch is, you won't be able to use img tags. You can use images as background-image and animate background on :hover NOTE: Fade in effect can be removed by playing with animation. HTML <div class="image-box"></div> CSS .image-box { height: 200px; width:...

Smooth mouse-out animation

css,css3,css-transitions,css-animations

You should use transitions for this. They will allow you to keep the transition smooth when the mouse moves out of the element. Example : .dn-diamond { display: inline-block; width: 100px; height: 100px; background: #000; transform: rotateY(0deg) rotateZ(-45deg); transition: transform 3s linear; margin: 50px; overflow: hidden; } .dn-diamond:hover { transform:...

Pure CSS animation visibility with delay

css,css3,css-animations

You are correct in thinking that display is not animatable. It won't work, and you shouldn't bother including it in keyframe animations. visibility is technically animatable, but in a round about way. You need to hold the property for as long as needed, then snap to the new value. visibility...

Add CSS3 transitions to jQuery Animate script

javascript,jquery,html,css,css3

You mean do the entire animation in css3? var av_icons = ["http://img3.wikia.nocookie.net/__cb20111227211832/cjpedia/images/c/c5/503px-Luigiart6.png", "http://files.softicons.com/download/game-icons/super-mario-icons-by-sandro-pereira/ico/Mushroom%20-%201UP.ico", "http://icons.iconarchive.com/icons/yellowicon/game-stars/256/Mario-icon.png", "http://img3.wikia.nocookie.net/__cb20111227211832/cjpedia/images/c/c5/503px-Luigiart6.png", "http://icons.iconarchive.com/icons/yellowicon/game-stars/256/Mario-icon.png",...

Mobile parallax with fixed background

javascript,html,css,mobile,parallax

Here's a quite simple solution without any plugins and jQuery. Works on mobile: http://codepen.io/DreySkee/pen/6384ef57faaf278ed331c6c56e76fa0d HTML: <div id="fixed-bg"></div> <div id="content"> <div class="section addPadding"></div> <div class="section addPadding"></div> <div class="section"></div> </div> CSS: #fixed-bg { position: fixed; width: 100%; background: url('http://juliewight.com/wp-content/uploads/2013/11/space-wallpaper-widescreen-2.jpg') no-repeat;...

Delayed CSS3 modal window fade in

css3,css-animations

You can use animation initial value: (this is longhand) animation-delay: 7s I've prepared working example for you. I've also used animation-fill-mode: forwards, so after animation is finished, opacity remains 1 (not equals 0 as before animation started) animation-fill-mode: forwards; Putted altogether (shorthand): animation: myFade 0.5s linear 5s; Where: myFade is...

CSS Image Background - Same Scale Across Different Devices

html,css,css3

Background-size cover is only useful if you want to stretch your background-image. If you are going to put it in a fixed-size container anyway, there no point to doing what you are doing anyhow. The best solution might simple be to define a background-size in a non-relative unit, like px....

How to position div which contains font-awesome icons to centre of another div?

jquery,html,css,css3

@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css); body{background-color:black} #menuRightSideGame { position: absolute; top: 28%; right: 2%; } .rightSideMenuItem { width:70px; height:70px; background: #c3834c; z-index: 1990; background-size: 100%; position: relative; border-radius:50%; box-shadow:0 0 5px 5px white; margin:20px; text-align: center; /* vor horizontal align */ } .rightSideMenuItemIcon { color: #fff; line-height:70px; /* for vertical align, needs...

Variable price for mobile app for various countries [closed]

android,ios,mobile,mobile-application

for ios SKProduct has a property "priceLocale" , which provide you local price of product (based on device local by default). For each in-app purchase item you have to create a separate SKProduct object with a valid "productIdentifier". SKProductsRequest *request = [[SKProductsRequest alloc] initWithProductIdentifiers:[NSSet setWithObject:bundleID]]; request.delegate = self; [request start];...

css3 animation text repeatly

css,css3,css-animations,keyframe

You can actually use infinite loop for your animation. Just that you need to time your animation at the keyframes instead of using delay. See the fiddle The CSS : .animation_text{ animation:animation1 9s infinite; } .animation_text1 { animation:animation2 9s infinite; } .animation_text2 { animation:animation3 9s infinite; } @keyframes animation1 {...

Responsive css always applying landscape

html,css3,responsive-design,screen-orientation

You have some errors in your code. You don't use , in between logical operators. You're also missing a closing }. Also, your media queries are very specific due the and operator. As a beginner, I would drop the logical operators and only work with the device-width property as this...

Float left and float right not working + sub-menu positioned under first UL item?

html,css,css3

Give your nav ul li relative position: poisition:relative and your nav ul li ul should have the following rules: position:absolute; left:0; top:27px; /* so it will bedirectly underneath */ Finally, to get the hovering working, use nav ul li:hover>a selector for the hover effect, instead of nav ul li a:hover....

:nth-of-type selector overrides all other CSS selectors

html,css,css3,css-selectors,css-specificity

The rule with the blue is more specific and that is why it takes precedence. Ref: https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity...

Swap nav and div vertically uing CSS only

html,css,html5,css3

The suggested swap does work. You had some errors in your css. You need to remove the period "." before nav and #date in your css. .swapHack{ display:table; width: 100%; } #date { display: table-header-group; } nav { display: table-footer-group; } <div class="swapHack>" <header> <div id="logo"> <img src="images/logo.png" title="Site Name"...

CSS Background horizontal centering

html,css,css3,center

You can use background-size: cover; like explained here.

compilation errors in sass with 2 instances of @media (max width / min) [duplicate]

css,css3,sass,compass

I got an error when inserting it into a text editor, it seems that your closing bracket on your first media query was not right, maybe copied code. Anyways, copy, paste this into your css and it should solve the problem. @media (max-width:950px) and (min-width:800px) { .clickFacet { width: 93%;...

Fit an image inside a div that also has a title?

html,css,css3

One possibility that gives just one constant-pixel value (repeated once): .block h2 { height: 30px; } .block img { height: calc(100% - 30px); } ...

CSS Container Wrap shaped Polygons

css3,polygon,css-shapes

You could use a basic SVG path http://codepen.io/anon/pen/XbaKLp <svg width="300px" height="100px" version="1.1" xmlns="http://www.w3.org/2000/svg"> <path d="M5 5 L170 3 L295 15 L280 95 L130 80 L110 95 L20 85" stroke="transparent" fill="#8eab32"></path> </svg> Mx y represents the first coordinates; Lx y represents a straight line from previous coordinates to (x, y). (you...

Colour overlay on hover

css3,hover,overlay,css-transforms

Your <a> tag doesn't contain any of the elements you want to change, so the hover will not affect them (both the <img> and the text in <h2> exist in the parent <article> tag - you might want to put the :hover on the article tag, and change the...

Using CSS :after to shade a button:hover

css,css3,button

How about using box-shadows ? button { border: 0; padding: 1em; position: relative; cursor: pointer; background: none; } button:hover { box-shadow: inset 0 0 0 50px rgba(0, 0, 0, 0.2); } button.green { background-color: #6c842e; color: #ffffff; } <button>Boop</button> <button class="green">Boop</button> ...

How to make my nav bar responsive

html5,css3,media-queries

This should work: @media only screen and (max-width: 600px) { (...) } Note that IE8 and below don't support media queries....

Round edges on shorter side in CSS [duplicate]

css,css3,css-shapes

Just use a huge number, e.g. border-radius: 9999999px; .horizontal { width: 175px; height: 50px; } .vertical { width: 50px; height: 175px; } .box { border-radius: 9999999px; display: inline-block; vertical-align: middle; margin: 0 10px; background: blue; } <div class="horizontal box"></div> <div class="vertical box"></div> It works because, according to the spec, Corner...

Prevent bootstrap 3 tab from stacking when window is resized (made smaller)

html5,css3,twitter-bootstrap-3

Your tabs breakdown after the width is within 767px, so you can use the below CSS hack. @media (max-width: 767px) { .nav-tabs.nav-justified > li { float: left; width: 50%; } } Bootply...

How to avoid wrap in IE7 when I have two ul in a navigation?

html,css,css3,internet-explorer,internet-explorer-7

When using floats, floating elements should come first in DOM tree. <div id='navigation'> <ul style='float:right;'> <li><span> leftspan </span></li> <li><a href="http://www.google.com" target="_blank">google</a></li> <li><a href="http://www.apple.com" target="_blank">apple</a></li> </ul> <ul> <li><span> leftspan </span></li> </ul> </div> This should work in IE7 (It works on emulator)...

Flexbox in Chrome doesn't seem to respect 'aspect ratio' padding; fine in Firefox

css,css3,flexbox

It's a Chrome bug. See this simplified snippet: .flex { display: flex; flex-flow: column wrap; max-height: 200px; background: red; justify-content: space-between; margin: 10px 0; } .big, .small { background: blue; margin: 10px; } .big { height: 75px; } .small { height: 50px; } <div class="flex"> <div class="small"></div> <div class="small"></div> <div...

list checkboxes displayed horizontal

html,css,html5,twitter-bootstrap,css3

First thing is your mark-up is totally wrong! You cannot have <ul> inside <span>. You can have only <li> inside <ul>. To answer your query, it is just a simple CSS fix: .new-select { display: inline-block; } ...

Setting up the page grid using push and pull

html,twitter-bootstrap,css3,twitter-bootstrap-3

Make sure you don't add a period (.) inside of the class attribute. When using push/pull, you need to offset the columns from where they would normally go. Moving them left or right won't change their underlying order in the document flow. So you can do it like this:...

Pure Css transition slide down panel not working

html,css,css3

Height of #StayOpen is 0px. Also you have to check CSS rule priorities. Your code might look like this: #StayOpen { height: 100%; } #StayOpen:hover #AccomodationPanel { height:300px !important; } Look at this fiddle. Transition In your question you've mentioned about transition. You can add it in #AccomodationPanel (updated example):...

css disappears on the click of a button

javascript,jquery,html,css,css3

FIDDLE: You just need to modify this line span.innerHTML = str; to span.innerHTML = '<span class="first_digit">' + parseInt(counter / 60) + '</span><span class="second_digit">:</span><span class="third_digit">' + parseInt((counter % 60) / 10) + '</span> <span class="fourth_digit">' + (counter % 60) % 10; ...

customize the handler of input range

css,html5,css3

Use the following to style the base: input[type=range] { -webkit-appearance: none; /* Hides the slider so that custom slider can be made */ width: 100%; /* Specific width is required for Firefox. */ } input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; } input[type=range]:focus { outline: none; /* Removes the blue border. You should...

Click on link next link should be display on same page

javascript,php,jquery,html,css3

Ok, so i tried to decypher what you meant with your Question. To Clarify: He has this one page setup. inside the div Our Project, there are two Buttons or links Visit more. When clicked, he wants the About Section to be shown. All in all it is impossible for...

Setting overflow: scroll on a table with display: flex

html,css,css3,overflow,flexbox

According to the HTML spec, browsers must wrap the <tr> elements inside a <tbody> element if there isn't any: The height of that <tbody> will be the height of all rows. However, the height of the <table> can be smaller. That wouldn't be a problem in a table layout, because...

boostrap & Normalize.css: spacing problems

html5,twitter-bootstrap,css3

As far as I see you have this style .wrapper { border: 1px solid white; } Try to remove the border style. It should help you....

Dynamic font-size according to device

css,css3

You can use viewport widths and heights in CSS: .vwHeight {font-size: 5.9vw;} A preview of the same would be: More info on Viewport Sized Typography....

how to align column to the right?

angularjs,css3,twitter-bootstrap-3

You can add ' text-right to your <div class="col-md-6 form-group"> please see here http://plnkr.co/edit/rUAdxLJ6ExKZYFbkveuC?p=preview and if you want to have column for 50% of screen even on small devices change col-md-6 to col-xs-6 http://plnkr.co/edit/RxPx0zzT5YmodepQ3zIj?p=preview...

How do you make a div only extend in one direction when the outer container size increases?

javascript,html,css,css3,layout

You can try the following: Full screen example jsFiddle HTML: (Took leftCol out of container) <div id="page"> <div id="leftCol"> LEFT </div> <div id="container"> <div id="rightCol"> RIGHT </div> </div> </div> JS: (Update the width on page resize and on load) $(window).on('resize', function(){ var containerWidth = 980; var pageWidth = $(window).width(); var...

Animate removal of list items with css

css,angularjs,css3,animation,css-animations

The idea is to set the height of container and add transition to the height. $scope.styles.height = $scope.messages.length * 20 + 'px'; http://plnkr.co/edit/3dnGeVoQ1DbX55WQtJjk?p=preview...

how to use .load(function() { on a large function

javascript,jquery,ajax,css3

You would want multiple deferred objects to pass them into $.when(). I believe you're looking for something like this: var d1 = new $.Deferred(); var d2 = new $.Deferred(); var d3 = new $.Deferred(); $.when(d1, d2, d3).then(function() { // perform your animations here }); $(img1).load(function() { d1.resolve(); } $(img2).load(function() {...

CSS drop down navigation

css,html5,css3,drop-down-menu,navigation

You have to add a position:absolute to the selector .navigation li ul .navigation{ margin-right: auto; margin-left: auto; width: 100%; background-color: #0f9cde; position: absolute; display: block; margin-bottom: 15px; z-index: 1000; margin-left: -15px; } /*Strip the ul of padding and list styling*/ .navigation ul{ list-style-type: none; margin: 0 auto; padding: 0; position:...

How to properly position divs for overlay hover effect with text underneath

html,css,css3

Check the code below should be what your after. They key here is positioning. What you want is a box that overlays its container and has text in the dead center. In these instances position:absolute & position:relative mean everything. A small understanding of relativity would help in this situation but...

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 */ } } ...

drop down menu toggle does not work

jquery,html,css,css3

You are missing the equals sign before the class name in your link tag: <li><a class"drop-menu" href="#" >Galleries</a> ^ /* Add equals sign: */ <li><a class="drop-menu" href="#" >Galleries</a> .. therefore the .drop-menu selector is not returning anything. You should consider storing your selections too: var main = function() { var...

Is there an opposite CSS pseudo-class to :hover?

css,css3,css-selectors,pseudo-class

Yes, use :not(:hover) .child:not(:hover){ opacity: 0.3; } jsBin demo Another example; I think you want to: "when one is hovered, dim all other elements". If my assumption is correct, and assuming all your selectors are inside the same parent: .parent:hover .child{ opacity: 0.2; // Dim all other elements } .child:hover{...

Stop Prevent Default in else clause

if-statement,mobile,menu

Try moving e.preventDefault(); into the appropriate branch of the if statement for example: $('.touch .mobile-list > li > a').on('click', function(e){ if($(this).parents('li').hasClass('visible-submenu')) { $(this).parents('li').removeClass('visible-submenu'); e.preventDefault(); } else { $('.mobile-list li.visible-submenu').removeClass('visible-submenu'); $(this).parents('li').addClass('visible-submenu'); } }); ...

CSS: How to flow text around both left and right images

css,css3

It's just as you said. You need to have one image with float:left and another with float:right. If both are placed before the text, they will each be at their respective top corners, horizontally aligned. <img src="http://placehold.it/100x200" style="float:left;"> <img src="http://placehold.it/100x200" style="float:right;"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur...

CSS - Linear Gradient Background Color no-repeat is not working for if it has multiple tds

html,css,css3

table{border-collapse:collapse;width:100%} table tr td{padding:5px;border:1px solid #000; background:#FFF } table tr:hover td{padding:5px;border:1px solid #000; background:transparent } table{ background:...

CSS3 Columns children with margin issue w// Chrome

javascript,jquery,html,css,css3

Even though I do not have an explanation for that issue - have you tried using display: inline-block for the paragraphs? Applying that seems to fix the issue with chrome. .content p { display: inline-block; } ...

Content section overlap footer

html,css,twitter-bootstrap,css3,twitter-bootstrap-3

remove - position: absolute for footer create wrapper for page content to push down footer html, body { height: 100%; } body { margin: 0; padding: 0; } .wrapper { min-height: 100%; height: auto; /* Negative indent footer by its height */ margin: 0 auto -60px; /* Pad bottom...