- This topic is empty.
-
AuthorPosts
-
May 11, 2013 at 3:08 pm #44707drotarParticipant
good morning, wondering if anybody had a solution. i am using adaptive images for my responsive site and would like to have a separate css page for the iPad retina and normal landscape mode. i need to move the artwork for this page to be more precise than the desktop css offers. Problem i am having is that i can’t quite get it to work and was wondering if someone knew the answer (which someone on this wonderful site always does.) what i have now in my mquery css is:
/* phone-landscape */
@import url(“phone-landscape.css”) only screen and (min-width:321px) and (max-width:480px);/* tablet */
@import url(“tablet.css”) only screen and (min-width:481px);/* desktop */
@import url(“desktop.css”) only screen and (min-width:769px);/* phone-portrait */
@import url(“phone-portrait.css”) only screen and (max-width:320px);
/*high-res*//* hi-res */
@import url(“hi-res.css”) only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (-moz-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2);/*
iPad Only landscape
*/
@import url(‘tablet-landscape.css’) only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape);
/*
iPad landscape Retina Device Only
*/
@import url(‘tablet-landscape.css’) only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) and (-webkit-max-device-pixel-ratio: 2)and (min-device-pixel-ratio : 2) and (max–moz-device-pixel-ratio: 2) ;
/*
iPad landscape Non Retina Device Only
*/
@import url(‘tablet-landscape.css’) only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) and (-webkit-max-device-pixel-ratio: 1)and (min-device-pixel-ratio : 1) and (max–moz-device-pixel-ratio: 1) ;@import url(‘tablet-landscape.css’) screen and (orientation:landscape) and (min-width: 1024px);
the test site can be seen at http://www.johnbehring.tv
thanks for your help. peace!
May 11, 2013 at 4:30 pm #134791drotarParticipanti mean when i play it johnbehring.tv the iPad landscape mode should have a red box underneath the invalid license box. on the desktop mode that same box should be clear. what i have now is the red box showing up on both the landscape and desktop modes. your help would be greatly appreciated if you have any idea on how i can fix this discrepancy.
May 11, 2013 at 5:21 pm #134798drotarParticipantfixed it. secret is that you need to resize the desktop 1 pixel larger(1025) then the min iPad (1024) than place each query in the correct order. correct code attached below:
/* phone-landscape */
@import url(“phone-landscape.css”) only screen and (min-width:321px) and (max-width:480px);/* tablet – portrait */
@import url(“tablet.css”) only screen and (min-width:481px);/*
iPad Only landscape
*/
@import url(‘tablet-landscape.css’) only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape);
/*
iPad landscape Retina Device Only
*/
@import url(‘tablet-landscape.css’) only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) and (-webkit-max-device-pixel-ratio: 2)and (min-device-pixel-ratio : 2) and (max–moz-device-pixel-ratio: 2) ;
/*
iPad landscape Non Retina Device Only
*/
@import url(‘tablet-landscape.css’) only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) and (-webkit-max-device-pixel-ratio: 1)and (min-device-pixel-ratio : 1) and (max–moz-device-pixel-ratio: 1) ;@import url(‘tablet-landscape.css’) screen and (orientation:landscape) and (min-width: 1024px);
/* desktop */
@import url(“desktop.css”) only screen and (min-width:1025px);/* phone-portrait */
@import url(“phone-portrait.css”) only screen and (max-width:320px);/* hi-res */
@import url(“hi-res.css”) only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (-moz-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2); -
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.