Override.css in Google Chrome Mobile

Hi Folks,

I've just noticed that when viewing my site http://www.crowdedbrain.co.uk via the iPad's Google Chrome Mobile browser that it tends to ignore the Override.css code that I have setup.

I specified that the top Ad should float to the left and while this displays correctly in Safari it does not work in Google Chromes Mobile browser.

I have attached comparison screen shots to the post.

Here is the code that I use in the override.css file to achieve the result. Possibly something is not working with this?

body[data-tablet="true"] #gkTopBanner {
float:left;
}

However I believe Google Chrome does not even load the Override.css file because removing the above line of code and adding display:none !important; for example, does nothing in Google Chrome Mobile.

Any ideas or is this just a bug with Google Chrome Mobile?

Please add your code to tablet.css and mobile.css because media queries may overwrite default 'desktop' styles.

Thanks for the reply.

I added the code to the tablet.css files etc but it did not work, I think Google Chrome Mobile is actually taking the css from the main template.css file.

I simply changed the default code in the template.css file..

Code: Select all

#gkTopBanner {
   float: right;
   margin: -16px 0 10px 0;
}

And changed this to...

#gkTopBanner {
float: left;
margin: -16px 0 10px 0;
}

However as this pushed the banner out for the desktop version I had to add an extra line of code..

Code: Select all

#gkTopBanner {
   float: left;
   margin: -16px 0 10px 0;
   margin-left: 20px;
}

Now Google Chrome Mobile displays the banner, albeit a little out still, but it is a lot better than it was

Thanks though for the heads up.