I've chosen to bypass the menu bars of the theme, because I want the menu bar on the bottom of my page and couldn't find any other solution than to set this up with a bunch of html a href codes, which works fine on a computer or ipad, but on a mobile phone the whole menu gets warped and does not fit on one line any more, so I'm looking for a condition CSS code (OR ANY OTHER SOLUTION) that will help me shrink down the footer on mobile phones...

so far I've tried things like, this, but they don't really work...
please help?


FOOTER STYLE:

font-size:22px;

@media only screen and (min-device-width: 320px) and (max-device-width: 480px)
{
font-size:14px;
}

That CSS won't work, you need to look up the syntax for '@media' try googling 'css @media'

I had come as far as this (see below), but maybe there is an easier way, like putting the menu bar #pages in the footer, but all my attempts at doing so failed up to now.

this is one of the other @media codes that I tried:

background-image: url(/wp-content/images/BGBOTTOM.png);
background-repeat: repeat-x;
padding: 10px;
text-align: center;
color: #000000;
font-family:Helvetica,Arial,Sans Serif;
font-size:22px;
font-weight:100;
position:fixed;
bottom:0;
z-index:999999;

@media only screen and (min-device-width: 320px) and (max-device-width: 480px)
{
background-image: url(/wp-content/images/BGBOTTOM.png);
background-repeat: repeat-x;
padding: 10px;
text-align: center;
color: #000000;
font-family:Helvetica,Arial,Sans Serif;
font-size:14px;
font-weight:100;
position:fixed;
bottom:0;
z-index:999999;
}

Did you lookup the syntax?

yes I did, I had googled extensively before posting this help request, had tried a couple of different versions of the @media solution, because those seemed to make the most sense.

I did get different results with different inputs, but none seemed to give me a working version where the footer menu bar didn't go all over the place in mobile, or be too small in all other cases.

on another site that was not wordpress based, I had used a different code before, but there I had just designed the site in a couple different ways and had them redirect, isn't there something like that that I can do? :

if ((navigator.userAgent.match(/iPhone/iPad/iPod/Android/Blackberryi)) {
location.replace("http://website.com/mobile/index.html") 
};

hmmm, that sounds logical...
later when I have time I'll try this:

if ((navigator.userAgent.match(/iPhone/iPad/iPod/Android/Blackberryi)) {
font.size:18px;
};

ok, did try that, and it didn't work...

(I also tried to add "div#pages" to either the footer style and the footer content, but both failed too

I don't see any selectors for your @media queries. What are the CSS rules supposed to be applied to?

oops, totally forgot about this thread (forgot to set email notification for it).

what I'm really wondering is: is there a simple code to have the menu bar show up in the footer instead of the header? (because the menu bar does resize properly on a mobile device)

is there a simple code to have the menu bar show up in the footer instead of the header?

No there isn't