re-set anchor text size

[ginerjm]

Ok - gotta be a brain-malfunction but the following code is not doing what I want.

 

I have a menu with a block of anchor tags. I want to enlarge the font on mobile devices and I have this JS function:

 

elems = document.getElementById('menu_box2').getElementsByTagName('a');
for(var i=0; i<elems.length; i++)
{
	elems[i].style.marginBottom = "25px";
	elems[i].style.fontSize = "32px";
}

which is executed to enlarge the font as well as to add some spacing. Well - the margin reset works fine, but the font is not working.

 

What am I forgetting here?

[kicken]

Why are you using javascript instead of media queries? 

@media (max-width: 768px) {
    #menu_box2 a {
        margin-bottom: 25px;
        font-size: 32px;
    }
}

[ginerjm]

cause I am? Yes I know about this but this is stuff from my earlier days and I just need to make a change and am wondering what the h... I am mis-remembering wrong.

[kicken]

Your code seems fine as posted. The margin doesn't apply unless the items are set as display: block; or display: inline-block, but you say that is working so I am assuming you have that setup. The only reason I can think of why the font size might not be applied is if you have another rule somewhere that is marked as !important overriding it.

[ginerjm]

Well, thanks for checking it out. Gotta be something else as you said.

[ginerjm]

OK - help me out on my first venture into media queries. Please.

The css that I added does not work as I've set it up.

 

The css is:

	@media (max-width: 500px)
	{....

The settings under that media label do not happen. Nor does this bit of testing code.

 

	// Create the query list.
	var test_val = '500px';
	var test_str = 'max-width: ' + test_val;
	var mediaQueryList = window.matchMedia("(test_str)");
	// Define a callback function for the event listener.
	function handleOrientationChange(mql)
	{
		var w = screen.availWidth;
		if (mql.matches)
		{
			alert("Got a match: testing for " + test_val + " width is: "+w);
		}
		else
		{
			alert("Non-match:  testing for " + test_val + " width is: "+w);
		}
	}
	// Add the callback function as a listener to the query list.
	mediaQueryList.addListener(handleOrientationChange); 
	handleOrientationChange(mediaQueryList); // Run the orientation change handler once.

Now, when I run my script on my laptop I get the 'non-match' message saying my width is 1366. Great.

But - when I run on my iphone6 I get the same 'non-match' message saying my width is 375.

 

 

I must me mis-undertanding the testing that goes on here. Why is that a "non-match"?

[ginerjm]

Please ignore my previous post. I had some lines of my code in the wrong places apparently because my testing is now accurate.

 

BUT - my css is still not working.

 

When my testing code (above) shows a 'match' condition for a max-width of 768 the following should happen but it doesn't.

	@media (max-width: 768px)
	{
		#menu_box2 a, #menu_box2 input
		{
			margin-bottom: 20px;
			font-size: 32px;
		}
		#menu_box2
		{
			border:1px solid white;
		}
	}

And - I cannot find any 'later' css settings in my script that would over ride this. I even added a setting to show a border on the box and that is not showing up.