Register FAQ / Rules Forum Spy Search Today's Posts Mark Forums Read
Go Back   MacRumors Forums > Special Interests > Visual Media > Web Design and Development

Thread Tools Search this Thread Display Modes
Prev Previous Post   Next Post Next
Old Jan 6, 2013, 01:56 PM   #1
Brendon Bauer
macrumors 6502
Join Date: May 2007
Location: Good 'ol USofA
Trouble with responsive web design on iPhone

Back with another question...

I have a responsive web design set up so that when scaling the browser window down (or viewing on a mobile device: iPhone) the navigation menu changes to something more manageable. The problem is that this works on every page except for one, and even then it works in desktop browsers when scaling the window size down to iPhone sizes, but it does not work on the iPhone.

You can see the problem here:

When viewed in chrome, safari, IE and making the window extremely narrow, you'll see the menu change as it should. When viewing it on an iPhone, you'll notice it changes but does not inherit the styling that it should. Compare that page with another page ( to see the difference in how the iPhone should and should not render it.

I have narrowed it down to this:

In order for the mediaElement player to work, I need to include jQuery.js. But doing this is what causes the problem. If I move the .js call to below the navigation, things go back to normal (except I then have a non-functioning mediaElement.

<?php include("../assets/includes/header.php") ?>

	<!-- Basic Page Needs
  	================================================== -->
	<meta charset="utf-8" />
	<title>Summit Northwest Ministries</title>
	<meta name="description" content="">
	<meta name="author" content="">
<?php include("../assets/includes/styles.php") ?>

<!-- Media Player -->
<script src="mediaElement/jquery.js"></script>
<script src="mediaElement/mediaelement-and-player.min.js"></script>
<link rel="stylesheet" href="mediaElement/mediaelementplayer.css" />
<!-- /End Media Player -->


<?php include("../assets/includes/nav.php") ?>

<!-- ============================================== -->

<!-- Super Container -->
<div class="super-container full-width" id="section-content">

	<!-- 960 Container -->
	<div class="container">
			<div class="sixteen columns">
				<h3 id="mp3player">Sermon Player</h3>
		<div class="sixteen columns">
			<div class="eight columns alpha" style="margin:15px 0 15px 0">
					<audio id="player" src="../../sermons/blank.mp3" type="audio/mp3" controls="controls" width="100%">		
						new MediaElement('player', {
					    // shows debug errors on screen
					    enablePluginDebug: false,
					    // remove or reorder to change plugin priority
					    plugins: ['flash','silverlight'],
					    // specify to force MediaElement to use a particular video or audio type
					    type: '',
					    // path to Flash and Silverlight plugins
					    pluginPath: '/responsive/sermons/mediaElement/',
					    // name of flash file
					    flashName: 'flashmediaelement.swf',
					    // name of silverlight file
					    silverlightName: 'silverlightmediaelement.xap',
			<div class="eight columns omega">
				<blockquote>Begin listening by clicking "Play Sermon" under a date below, or download the mp3 and listen later!</blockquote>
I can't seem to figure out how to resolve the problem :\
Retina Pro 15", iPhone 5
Brendon Bauer is offline   0 Reply With Quote

MacRumors Forums > Special Interests > Visual Media > Web Design and Development

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump

All times are GMT -5. The time now is 11:11 AM.

Mac Rumors | Mac | iPhone | iPhone Game Reviews | iPhone Apps

Mobile Version | Fixed | Fluid | Fluid HD
Copyright 2002-2013,, LLC