Quark and mobile CSS

I have looked at your Quark site on the mobile and also mine, and my site doesn't seem to have the correct styling. The menu to begin with cannot be seen properly, so I imagine that the mobile styling isn't kicking in. IS there something I am missing?

http://aeroviews.uk

Kind thanks

Hi

I can see You've made some changes to styling, so I'm not sure what is expected and what not. Please point me those problems You have in mind.

Hi, the main issue I have is with the menu items, the colours are all pretty grey on the mobile and so cannot be seen properly. I have made changes to override file, but the mobile.css doesn't seem to take effect, hence my question. Dos the mobile.css come into play, or is it the override which is effecting it.

Hi

I can see Your css is compressed at the moment so it may not showing changes made. Anyway here is the code to change the color in mobile version of the menu:

Code: Select all

.dark-bg .gkMainMenu > .gkmenu > li > a, .dark-bg .gkMainMenu > .gkmenu > li > span {
    color: #fff !important;
}


I think my question is not si much what is the css for changing the menu colour, as that i know. But why is the site not adhering to the mobile.css, as it does not seem to pick up on the mobile css. Does the override css also override.css the mobile.css, does that mean you need to code into override.css exemptions for mobile?

I have just added @media only screen and (max-device-width: 600px) {
to my override .css to get things working for the mobile. Dont think it is the best way but can't figure what is happening to the mobile .css/

Hi

override.css is loaded as last so any mobile/tablet/small.desktop/etc css files will be affected by it. This is how override supposed to work, so Your solution is not only good but best in this case. Using:

Code: Select all

@media only screen and (max-width:640px) {

}

will include override for mobile.css