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: http://www.summitnorthwest.org/responsive/sermons/

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 (http://www.summitnorthwest.org/responsive/) 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

Similar Threads
thread Thread Starter Forum Replies Last Post
Great primer on responsive design fig Web Design and Development 3 Feb 11, 2014 06:08 AM
How many people use MBA13 exclusively for design/web design? dxr808s MacBook Air 4 Jul 11, 2013 11:06 AM
advice on school for graphic design or web design/dev skatementle Web Design and Development 30 Sep 11, 2012 09:03 AM

Forum Jump

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

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

Mobile Version | Fixed | Fluid | Fluid HD
Copyright 2002-2015, MacRumors.com, LLC