Welcome to WebmasterWorld Guest from

Forum Moderators: not2easy

Message Too Old, No Replies

mobile css

7:02 pm on Mar 3, 2012 (gmt 0)

Junior Member

5+ Year Member

joined:May 18, 2011
votes: 0

HI there, I am trying to fix something on my website and therefore doing some testing with mobile css (I use opera mini emulator [opera.com ] ).
I am testing this code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="description" content="Digital photography">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<style type="text/css">

@media all and (max-width: 480px) {

#main_picture { background:yellow; width:90%; height: 450px; border: 4px solid red; margin: 0 auto; }

img { width: 100%; }




<div id = "main_picture" style ="width: 50%; height: 150px; border: 1px solid red; margin: 0 auto;">
<div style = "border:1px solid green; width:30%; background:blue; height:10%;">

<img src = "home_0.jpg" alt = " " class = "active" >

and I have noticed something very weird.
From what I understand the @rule should apply only to mobile devices with a max-width of 480px. When I run the code in the operamini emulator, I noticed that the #main_picture is picking up a width of 50% and not 90% as it should. Also it has a border of 1px and not 4px as it should as specified in the media rule. Now I wonder, why the code in the media rule is ignored and it defaults to the main css?
5:26 pm on Mar 8, 2012 (gmt 0)

Senior Member

WebmasterWorld Senior Member 5+ Year Member

joined:Aug 9, 2008
posts: 961
votes: 0

Hi dupalo, not so much ignoring the mobile css, but rather it is being over-written by the inline style.

Recall rules are applied in order of:
external sheet
embedded sheet (in the head of the doc)
inline style

So the widths and border specified in the inline style over-ride the ones specified in the embedded sheet.