Mobile Optimized CSS: Using a default CSS for desktop browsing and another for mobile

**Rabbit** · Mar 29 '13, 03:35 PM

It's hard to say where you went wrong without the code. We don't need to see all of it, just the HTML and CSS that relates to the banner you're talking about.

**Angel88** · Mar 31 '13, 09:54 AM

Sorry about that...

Here's the code for html:

Code:

<?php
if(strpos($_SERVER['HTTP_USER_AGENT'], "iPhone"))
{
    ?><link rel="stylesheet" href="mock.css" type="text/css" media="handheld" /><?php
}
else
{
    ?><link rel="stylesheet" href="style.css" type="text/css" media="screen" /><?php
}
?>

<html>
<head>>
<body>
<div class="header"><img src="images/banner.png" alt="" /></div>
</body>
</head>
</html>

*As you can see I used php code to call the proper stylesheet for both desktop and mobile device.

Here's the code for CSS:

Code:

@media (max-width: 520px){
/*Banner*/
.bannerpic { background-image:url(images/banner2.png)padding:14px 0 0 16px}
}

I suspect that there's something wrong with the bannerpic code. But the banner must be displayed on that exact position.

**Rabbit** · Mar 31 '13, 09:15 PM

You don't have an element with the bannerpic class that you reference in your css.

**Angel88** · Apr 7 '13, 12:15 PM

Bet I have...

Code:

img {border:0;vertical-align:top;text-align:left}
#header .row-1 .bannerpic { background-image:url(images/banner2.png); padding:14px 0 0 16px}
*Alignment*
.bannerpic {float:none; overflow:hidden; padding: 0 auto}

All these are partial codes of the second CSS.

**Rabbit** · Apr 7 '13, 08:18 PM

I know you have the CSS. I'm saying you don't have the HTML element that references that class.

Mobile Optimized CSS: Using a default CSS for desktop browsing and another for mobile

Mobile Optimized CSS: Using a default CSS for desktop browsing and another for mobile

Comment

Comment

Comment

Comment

Comment