Wordpress Themes - WP Forum at BFA

Wordpress Themes - WP Forum at BFA (http://forum.bytesforall.com/index.php)
-   Atahualpa 3 Wordpress theme (http://forum.bytesforall.com/forumdisplay.php?f=2)
-   -   conditional font size in footer? (http://forum.bytesforall.com/showthread.php?t=21474)

ericnl Feb 5, 2014 09:07 PM

conditional font size in footer?
 
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:
Code:

font-size:22px;

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


juggledad Feb 6, 2014 04:02 AM

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

ericnl Feb 6, 2014 06:35 PM

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:

Code:

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;
}


juggledad Feb 7, 2014 03:00 AM

Did you lookup the syntax?

ericnl Feb 7, 2014 04:33 AM

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? :

Code:

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:
Code:

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

lmilesw Feb 7, 2014 05:35 AM

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

ericnl Feb 18, 2014 04:37 PM

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)

juggledad Feb 19, 2014 03:21 PM

Quote:

is there a simple code to have the menu bar show up in the footer instead of the header?
No there isn't :(


All times are GMT -6. The time now is 05:25 AM.

Powered by vBulletin® Copyright ©2000 - 2020, Jelsoft Enterprises Ltd.