Retina Display css issue? -RESOLVED
Permalink 1 user found helpful
Hi,
I'm about to make my updated responsive site live and I'm noticed an error on the test server athttp://eclinicalsol.us when viewing on smaller Retina Display devices. I've attached a screenshot as perfect.png showing what how this site appears correctly on most devices, and then a screenshot of the errors that show up on smaller Retina Display devices as error.png. In error.png you'll see that the center blocks (below the slider and main content) are collapsed somehow. You will also see that the ul li's aren't spaced correctly.
I've noticed this problem on the iPad Air, iPad Mini, iPhone 5 so far. It doesn't show up on any of the macs or macbooks pro, so I'm assuming it has something to do with the responsivity of the site on Retina Displays? I also haven't been able to duplicate this problem with any of the cross-device emulators I use. It only actually shows up when I go to the mac store and take a look.
My code relating to the middle blocks is as follows:
....and my code relating to the footer nav is as follows:
Any help would be much appreciated.
I'm about to make my updated responsive site live and I'm noticed an error on the test server athttp://eclinicalsol.us when viewing on smaller Retina Display devices. I've attached a screenshot as perfect.png showing what how this site appears correctly on most devices, and then a screenshot of the errors that show up on smaller Retina Display devices as error.png. In error.png you'll see that the center blocks (below the slider and main content) are collapsed somehow. You will also see that the ul li's aren't spaced correctly.
I've noticed this problem on the iPad Air, iPad Mini, iPhone 5 so far. It doesn't show up on any of the macs or macbooks pro, so I'm assuming it has something to do with the responsivity of the site on Retina Displays? I also haven't been able to duplicate this problem with any of the cross-device emulators I use. It only actually shows up when I go to the mac store and take a look.
My code relating to the middle blocks is as follows:
.ctaRowContainer { position: relative; width: 940px; height: 280px; background: #FFFFFF; margin: 27px auto 40px; padding-bottom: 20px; } body.subpage .ctaRowContainer { height: 0; padding-bottom: 0; } .ctaLeft { position: absolute; top: 10px; left: 20px; width: 282px; } #homepageTwitter { } .ctaMiddle { position: absolute; top: 35px; left: 325px; width: 268px; } #ctaMiddle { background-color: #F2F2F2; /* fallback color if gradients are not supported */ background-image: -webkit-linear-gradient(#FFFFFF, #F2F2F2); /* For Chrome and Safari */ background-image: -moz-linear-gradient (#FFFFFF, #F2F2F2); /* For old Fx (3.6 to 15) */ background-image: -ms-linear-gradient (#FFFFFF, #F2F2F2); /* For pre-releases of IE 10*/ background-image: -o-linear-gradient (#FFFFFF, #F2F2F2); /* For old Opera (11.1 to 12.0) */ background-image: linear-gradient(#FFFFFF, #F2F2F2); /* Standard */ background-size: 100%; border: 1px solid #FFFFFF; border-radius: 4px 4px 4px 4px; box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.4); -moz-box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.4); -webkit-box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.4); } .ctaMiddlelow { position: absolute; top: 172px; left: 325px; width: 268px; } #ctaMiddlelow { background-color: #F2F2F2; /* fallback color if gradients are not supported */ background-image: -webkit-linear-gradient(#FFFFFF, #F2F2F2); /* For Chrome and Safari */ background-image: -moz-linear-gradient (#FFFFFF, #F2F2F2); /* For old Fx (3.6 to 15) */ background-image: -ms-linear-gradient (#FFFFFF, #F2F2F2); /* For pre-releases of IE 10*/ background-image: -o-linear-gradient (#FFFFFF, #F2F2F2); /* For old Opera (11.1 to 12.0) */ background-image: linear-gradient(#FFFFFF, #F2F2F2); /* Standard */ background-size: 100%; border: 1px solid #FFFFFF; border-radius: 4px 4px 4px 4px; box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.4); -moz-box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.4); -webkit-box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.4); } #ctaButton:hover { background-color: #D8D8D8; } .ctaRight { position: absolute; top: 10px; left: 620px; padding-left: 20px; height: 285px; width: 268px; }
....and my code relating to the footer nav is as follows:
#footerNav { position: absolute; top: 23px; left: 0; text-align: left; font-size: 14px; width: 710px; } #footerNav ul { display: inline-block; float: left; text-transform: uppercase; list-style-type: none; } #footerNav span { visibility: hidden; display: none; } #footerNav ul li { display: inline-block; position: relative; float: left; width: 80px; } #footerNav ul li.hideNavItem { display: none; visibility: hidden; width: 0; } #footerNav ul li.first-child { margin-right: 0;} #footerNav ul li.second-child { margin-right: 8px; } #footerNav ul li.third-child { margin-right: 29px; } #footerNav ul li.fourth-child { margin-right: 15px; width: 100px; } #footerNav ul li.fifth-child { } #footerNav ul li.sixth-child { margin-right: 10px; width: 65px; } #footerNav ul li.seventh-child { margin-right: 4px; width: 65px; } #footerNav ul li.last-item { } #footerNav ul li.lastItem ul { display: none; visibility: hidden; } #footerNav ul li.lastItem ul li { display: none; visibility: hidden; }
Viewing 15 lines of 21 lines. View entire code block.
Any help would be much appreciated.
I ended up kind of cheating the font-sizes a bit to make it work. To my understanding Retina Display should only really deal with images so I'm not sure if that's what the problem was. Anyways, I made it work. Honestly I'd delete this thread if I could.
