Wordpress Themes - WP Forum at BFA
Click here to register or to donate.
Auto self-registration is not available here - far too many spammers. This forum has many, many backlinks and because of that there is an intense desire among spammers to drop their links here.

Wordpress Themes - WP Forum at BFA » WordPress Themes » Atahualpa 3 Wordpress theme »

conditional font size in footer?


  #1  
Old Feb 5, 2014, 10:07 PM
ericnl
 
21 posts · Feb 2014
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;
}
  #2  
Old Feb 6, 2014, 05:02 AM
juggledad's Avatar
juggledad
 
23,576 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
That CSS won't work, you need to look up the syntax for '@media' try googling 'css @media'
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #3  
Old Feb 6, 2014, 07:35 PM
ericnl
 
21 posts · Feb 2014
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;
}
  #4  
Old Feb 7, 2014, 04:00 AM
juggledad's Avatar
juggledad
 
23,576 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
Did you lookup the syntax?
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #5  
Old Feb 7, 2014, 05:33 AM
ericnl
 
21 posts · Feb 2014
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
  #6  
Old Feb 7, 2014, 06:35 AM
lmilesw's Avatar
lmilesw
 
10,174 posts · Jul 2009
Central New York State USA
I don't see any selectors for your @media queries. What are the CSS rules supposed to be applied to?
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #7  
Old Feb 18, 2014, 05:37 PM
ericnl
 
21 posts · Feb 2014
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)
  #8  
Old Feb 19, 2014, 04:21 PM
juggledad's Avatar
juggledad
 
23,576 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
Quote:
is there a simple code to have the menu bar show up in the footer instead of the header?
No there isn't
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support

Bookmarks

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
changing post body font size without changing font color joshuamu Center area post/pages 1 Jan 10, 2013 06:30 AM
Changing font-family and font-size venicrea Montezuma Theme 3 Nov 5, 2012 05:59 AM
how to modify blog content of text font and font size lowper Header configuration & styling 1 Sep 27, 2012 07:47 PM
Conditional Link in the Footer imagineds Post-Kicker, -Byline & -Footer 1 Nov 9, 2011 02:04 PM
Font Size Menu Bar (Footlight MT Light font) does not change when giving higher px ematser Page & Category Menu Bars 2 Oct 15, 2011 01:06 PM


All times are GMT -6. The time now is 02:52 PM.


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