Mobile Styles & !important

[Brightonmike]

I’m working on the mobile styles for a site.

They only apply when I re-size the browser to mobile size when I use !important. If I take !important away, they have no effect.

Is this normal? It doesn’t seem so.

[Brightonmike]

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

/* Uncomment if you don't want iOS and WinMobile to mobile-optimize the text for you

j.mp/textsizeadjust

html { -webkit-text-size-adjust:none; -ms-text-size-adjust:none; } */

.slidercontainer {display:none}

#wrapper {width:300px!important;}

#mainMenu {top:150px!important;width:300px!important;}

#cta {width:100%!important;height:100%!important;float:left!important;top:20px!important;}

a.qbutton, a.q2button, a.servicebutton, .charterbox a {width:105px!important;margin-left:10px!important;}

#homeBoxes {margin-top:100px!important;width:98%!important;}

#homeBoxes .homeBox {}

.footercontact {width:98%!important}

.footer {width:96%!important}

.dropdown_1column,

.dropdown_2columns,

.dropdown_3columns,

.dropdown_4columns,

.dropdown_5columns {display:none}

#menu {

width:100%!important;

height:100%!important;

background: -moz-linear-gradient(top, #DBDBDB 0%, #BABABA 47%, #C6C6C6 50%, #C1C1C1 51%, #C1C1C1 58%, #C4C4C4 100%)!important; /* firefox */

background: -o-linear-gradient(top, #DBDBDB 0%, #BABABA 47%, #C6C6C6 50%, #C1C1C1 51%, #C1C1C1 58%, #C4C4C4 100%)!important; /* opera */

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#DBDBDB), color-stop(47%,#BABABA), color-stop(50%,#C6C6C6), color-stop(51%,#C1C1C1), color-stop(58%,#C1C1C1), color-stop(100%,#C4C4C4))!important; /* webkit */

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#DBDBDB', endColorstr='#C4C4C4',GradientType=0 )!important; /* ie */

}

#menu li:hover .dropdown_1column,

#menu li:hover .dropdown_2columns,

#menu li:hover .dropdown_3columns,

#menu li:hover .dropdown_4columns,

#menu li:hover .dropdown_5columns {

top:-999em;

}

#menu li .drop {

background:none!important;

height:20px!important;

padding-right:2px!important;

font-size:12px!important;

}

.postItemhome {width:270px;}

#blurb{display:none!important;width:0px!important;}



#menu li {

background: -moz-linear-gradient(top, #DBDBDB 0%, #BABABA 47%, #C6C6C6 50%, #C1C1C1 51%, #C1C1C1 58%, #C4C4C4 100%)!important; /* firefox */

background: -o-linear-gradient(top, #DBDBDB 0%, #BABABA 47%, #C6C6C6 50%, #C1C1C1 51%, #C1C1C1 58%, #C4C4C4 100%)!important; /* opera */

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#DBDBDB), color-stop(47%,#BABABA), color-stop(50%,#C6C6C6), color-stop(51%,#C1C1C1), color-stop(58%,#C1C1C1), color-stop(100%,#C4C4C4))!important; /* webkit */

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#DBDBDB', endColorstr='#C4C4C4',GradientType=0 )!important; /* ie */

}

#menu li a{

text-shadow:none!important;

color:#000!important;

}

#menu li:hover {

background: rgb(219,219,219);

background: -moz-linear-gradient(top, rgba(219,219,219,1) 0%, rgba(226,226,226,1) 48%, rgba(219,219,219,1) 51%, rgba(226,226,226,1) 60%, rgba(196,196,196,1) 100%)!important;

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(219,219,219,1)), color-stop(48%,rgba(226,226,226,1)), color-stop(51%,rgba(219,219,219,1)), color-stop(60%,rgba(226,226,226,1)), color-stop(100%,rgba(196,196,196,1)))!important;

background: -webkit-linear-gradient(top, rgba(219,219,219,1) 0%,rgba(226,226,226,1) 48%,rgba(219,219,219,1) 51%,rgba(226,226,226,1) 60%,rgba(196,196,196,1) 100%)!important;

background: -o-linear-gradient(top, rgba(219,219,219,1) 0%,rgba(226,226,226,1) 48%,rgba(219,219,219,1) 51%,rgba(226,226,226,1) 60%,rgba(196,196,196,1) 100%)!important;

background: -ms-linear-gradient(top, rgba(219,219,219,1) 0%,rgba(226,226,226,1) 48%,rgba(219,219,219,1) 51%,rgba(226,226,226,1) 60%,rgba(196,196,196,1) 100%)!important;

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dbdbdb', endColorstr='#c4c4c4',GradientType=0 )!important;

background: linear-gradient(top, rgba(219,219,219,1) 0%,rgba(226,226,226,1) 48%,rgba(219,219,219,1) 51%,rgba(226,226,226,1) 60%,rgba(196,196,196,1) 100%)!important;

-webkit-box-shadow:none;

-moz-box-shadow:none;

box-shadow:none;

}

#colLeft {

width:95%!important;

}



}

I can’t link you via the web as it’s minified but the websites is http://www.jetbookingdirect.com/

If you remove the !importants it doesn’t work. I have a feeling I’ve done something wrong with the stylesheet…those without the important work fine.

[Brightonmike]

Any ideas what’s wrong? :(

[Brightonmike]

I’ve tried that, and the styles now have no effect whatsoever. See the site to see what I mean.

Even when I was using !important, the styles didn’t work on my mobile phone either. I’ve tried it on Opera Mobile, Opera Mini and the Symbian browser and none of them worked.

Scratching my head here.

[Brightonmike]

It’s version 10.00?

What’s even odder is, when I did what you suggested, when I then removed the !important rules, it messed up the websites menu. I have no idea what’s going on. I tried disabling the minifying and that made no change either.

Ignore that ^^

Removing !important and putting at the end of the stylesheets basically makes no difference, and I can’t get it working on Opera Mobile.

[Author]

Posts