Media Query advice for ipad 1

[mlegg]

I just noticed that on my laptop, 1366 x 768, I see that. I looked at your html and you have that part in grid.

<div class="grid_5 alpha">
                <h1>HELLO & WELCOME</h1>
        <p class="introduction-message">

My name is Ian, and I have been supplying spare replacement vehicle car keys & fobs for many years now & have a large database of repeat buyers. I am PayPal verified which comes with PayPal's payment guarantee. I only use Royal Mail registered signed for & International signed for service. I am also able to cut & programme Honda & Ford key remotes. I can also clone some Ford & Suzuki keys. I am located in Weston Super Mare North Somerset just outside Bristol . If you don`t see what you require or need some advice then please contact me on <span class="mobile">07899 827427</span> Covering Brean, Cheddar, Clevedon, Hewish, Kewstoke, Nailsea, Portishead & other surrounding areas.

         <div id="google_translate_element"></div><script type="text/javascript">
function googleTranslateElementInit() {
  new google.translate.TranslateElement({pageLanguage: 'en', includedLanguages: 'af,ar,bg,bs,cs,cy,da,de,el,en,es,et,fa,fi,fr,ga,hr,hu,id,is,it,ja,ko,lt,lv,mk,mt,nl,no,pa,pl,pt,ro,ru,sk,sl,sq,sr,sv,th,tr,uk,zh-CN,zh-TW', layout: google.translate.TranslateElement.InlineLayout.SIMPLE}, 'google_translate_element');
}
</script><script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

          </p>
         <p><img src="m-images/uk-seller.png" alt="remote doctor is a uk seller" class="shadow"></p>  


         <p><br />

      </div>

         
         
        
<div class="grid_7 omega rightfloat">
<div class="flexslider">
<ul class="slides">
<li>
<img src="m-images/doctor-logo.png" alt="remote doctor logo" />
<p style="font-family:Arial, Helvetica, sans-serif;" class="flex-caption">Welcome, Come Take A Look At My Items For Sale</p>
</li>
<li>
<img src="m-images/cloning-logo.png" alt="key cloning service logo" />
<p style="font-family:Arial, Helvetica, sans-serif;" class="flex-caption">Ford & Suzuki Key Cloning Service</p>
</li>
<li>
<img src="m-images/skp900-logo.png" alt="skp-900 key programmer" />
<p style="font-family:Arial, Helvetica, sans-serif;" class="flex-caption">SKP-900 Key Programmer</p>
</li>
<li>
<img src="m-images/honda-2b-key.png" alt="honda 2b key" />
<p style="font-family:Arial, Helvetica, sans-serif;" class="flex-caption">Honda Key Remote 2 Button</p>
</li>
<li>
<img src="m-images/facebook-logo.png" alt="remote doctor is on facebook" />
<p style="font-family:Arial, Helvetica, sans-serif;" class="flex-caption">The Remote Doctor Keys & Remotes</p>
</li>
<li>
<img src="m-images/paypal.png" alt="paypal verified seller" width="960" height="400" />
<p style="font-family:Arial, Helvetica, sans-serif;" class="flex-caption">Make Secure Payments Using Paypal</p>
</li>
<li>
<img src="m-images/x100-logo.png" alt="x100+ key programmer" width="960" height="400" />
<p style="font-family:Arial, Helvetica, sans-serif;"  class="flex-caption">X100+ Honda Key Programmer</p>
</li>
<li>
<img src="m-images/honda-3b-key.png" alt="honda 3b key" />
<p style="font-family:Arial, Helvetica, sans-serif;" class="flex-caption">Honda Key Remote 3 Button</p>
</li>
<li>
<img src="m-images/whatsapp-logo.png" alt="whatsapp logo" />
<p style="font-family:Arial, Helvetica, sans-serif;" class="flex-caption">WhatsApp For Speedy Replies</p>
</li>
<li>
<img src="m-images/satisfaction-guarantee.png" alt="satisfaction logo" />
<p style="font-family:Arial, Helvetica, sans-serif;" class="flex-caption">If You Aren't Satisfied Then My Job Is Not Done!</p>
</li>
</ul>
</div>
</div><!-- FlexSlider -->

In your css I don't see grid_5 alpha or grid_7 omega rightfloat.

In your css I only see these parts with grid in it

/*SPACE GRID ELEMENTS VERTICALLY, SINCE THEY ARE ONE UNDER ANOTHER SO FAR*/
.grid_1,
.grid_2,
.grid_3,
.grid_4,
.grid_5,
.grid_6,
.grid_7,
.grid_8,
.grid_9,
.grid_10,
.grid_11,
.grid_12 {
	margin-bottom:40px;
}


/*GRID*/
/*
 & Columns : 12 

 */
.grid_1 { width: 5%; }
.grid_2 { width: 13.333333333333%; }
.grid_3 { width: 21.666666666667%; }
.grid_4 { width: 30%; }
.grid_5 { width: 38.333333333333%; }
.grid_6 { width: 46.666666666667%; }
.grid_7 { width: 55%; }
.grid_8 { width: 63.333333333333%; }
.grid_9 { width: 71.666666666667%; }
.grid_10 { width: 80%; }
.grid_11 { width: 88.333333333333%; }
.grid_12 { width: 96.666666666667%; }

.grid_1,
.grid_2,
.grid_3,
.grid_4,
.grid_5,
.grid_6,
.grid_7,
.grid_8,
.grid_9,
.grid_10,
.grid_11,
.grid_12 {
	margin-left: 1.6666666666667%;
	margin-right: 1.6666666666667%;
	float: left;
	display: block;
}

.alpha{margin-left:0px;}
.omega{margin-right:0px;}
.rightfloat{float:right;}
/* @
 * tinyfluidgrid.com
 & girlfriendnyc.com
 */

}
/*GRID*/
/*
 & Columns : 12 

 */
.grid_1 { width: 5%; }
.grid_2 { width: 13.333333333333%; }
.grid_3 { width: 21.666666666667%; }
.grid_4 { width: 30%; }
.grid_5 { width: 38.333333333333%; }
.grid_6 { width: 46.666666666667%; }
.grid_7 { width: 55%; }
.grid_8 { width: 63.333333333333%; }
.grid_9 { width: 71.666666666667%; }
.grid_10 { width: 80%; }
.grid_11 { width: 88.333333333333%; }
.grid_12 { width: 96.666666666667%; }

.grid_1,
.grid_2,
.grid_3,
.grid_4,
.grid_5,
.grid_6,
.grid_7,
.grid_8,
.grid_9,
.grid_10,
.grid_11,
.grid_12 {
	margin-left: 1.6666666666667%;
	margin-right: 1.6666666666667%;
	float: left;
	display: block;
}

.alpha{margin-left:0px;}
.omega{margin-right:0px;}
.rightfloat{float:right;}
/* @
 * tinyfluidgrid.com
 & girlfriendnyc.com
 */

}

/*GRID*/
/*
 & Columns : 12 

 */
.grid_1 { width: 5%; }
.grid_2 { width: 13.333333333333%; }
.grid_3 { width: 21.666666666667%; }
.grid_4 { width: 30%; }
.grid_5 { width: 38.333333333333%; }
.grid_6 { width: 46.666666666667%; }
.grid_7 { width: 55%; }
.grid_8 { width: 63.333333333333%; }
.grid_9 { width: 71.666666666667%; }
.grid_10 { width: 80%; }
.grid_11 { width: 88.333333333333%; }
.grid_12 { width: 96.666666666667%; }

.grid_1,
.grid_2,
.grid_3,
.grid_4,
.grid_5,
.grid_6,
.grid_7,
.grid_8,
.grid_9,
.grid_10,
.grid_11,
.grid_12 {
	margin-left: 1.6666666666667%;
	margin-right: 1.6666666666667%;
	float: left;
	display: block;
}

.alpha{margin-left:0px;}
.omega{margin-right:0px;}
.rightfloat{float:right;}
/* @
 * tinyfluidgrid.com
 & girlfriendnyc.com
 */

}

[mlegg]

Your grid isn't responsive. I looked on my samsung galaxy and don't see the right part with the flex slider.
Edit you index.html file and add this responsive grid code.

<div class="section group">
	<div class="col span_1_of_2">
	<h1>HELLO & WELCOME</h1>
        <p class="introduction-message">
My name is Ian, and I have been supplying spare replacement vehicle car keys & fobs for many years now & have a large database of repeat buyers. I am PayPal verified which comes with PayPal's payment guarantee. I only use Royal Mail registered signed for & International signed for service. I am also able to cut & programme Honda & Ford key remotes. I can also clone some Ford & Suzuki keys. I am located in Weston Super Mare North Somerset just outside Bristol . If you don`t see what you require or need some advice then please contact me on <span class="mobile">07899 827427</span> Covering Brean, Cheddar, Clevedon, Hewish, Kewstoke, Nailsea, Portishead & other surrounding areas.

<div id="google_translate_element"></div><script type="text/javascript">
function googleTranslateElementInit() {
  new google.translate.TranslateElement({pageLanguage: 'en', includedLanguages: 'af,ar,bg,bs,cs,cy,da,de,el,en,es,et,fa,fi,fr,ga,hr,hu,id,is,it,ja,ko,lt,lv,mk,mt,nl,no,pa,pl,pt,ro,ru,sk,sl,sq,sr,sv,th,tr,uk,zh-CN,zh-TW', layout: google.translate.TranslateElement.InlineLayout.SIMPLE}, 'google_translate_element');
}
</script>
<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
</p>
         
<p><img src="m-images/uk-seller.png" alt="remote doctor is a uk seller" class="shadow"></p>  

<p><br />
      </div>

</div>
<div class="col span_1_of_2">
<div class="flexslider">
<ul class="slides">
<li>
<img src="m-images/doctor-logo.png" alt="remote doctor logo" />
<p style="font-family:Arial, Helvetica, sans-serif;" class="flex-caption">Welcome, Come Take A Look At My Items For Sale</p>
</li>
<li>
<img src="m-images/cloning-logo.png" alt="key cloning service logo" />
<p style="font-family:Arial, Helvetica, sans-serif;" class="flex-caption">Ford & Suzuki Key Cloning Service</p>
</li>
<li>
<img src="m-images/skp900-logo.png" alt="skp-900 key programmer" />
<p style="font-family:Arial, Helvetica, sans-serif;" class="flex-caption">SKP-900 Key Programmer</p>
</li>
<li>
<img src="m-images/honda-2b-key.png" alt="honda 2b key" />
<p style="font-family:Arial, Helvetica, sans-serif;" class="flex-caption">Honda Key Remote 2 Button</p>
</li>
<li>
<img src="m-images/facebook-logo.png" alt="remote doctor is on facebook" />
<p style="font-family:Arial, Helvetica, sans-serif;" class="flex-caption">The Remote Doctor Keys & Remotes</p>
</li>
<li>
<img src="m-images/paypal.png" alt="paypal verified seller" width="960" height="400" />
<p style="font-family:Arial, Helvetica, sans-serif;" class="flex-caption">Make Secure Payments Using Paypal</p>
</li>
<li>
<img src="m-images/x100-logo.png" alt="x100+ key programmer" width="960" height="400" />
<p style="font-family:Arial, Helvetica, sans-serif;"  class="flex-caption">X100+ Honda Key Programmer</p>
</li>
<li>
<img src="m-images/honda-3b-key.png" alt="honda 3b key" />
<p style="font-family:Arial, Helvetica, sans-serif;" class="flex-caption">Honda Key Remote 3 Button</p>
</li>
<li>
<img src="m-images/whatsapp-logo.png" alt="whatsapp logo" />
<p style="font-family:Arial, Helvetica, sans-serif;" class="flex-caption">WhatsApp For Speedy Replies</p>
</li>
<li>
<img src="m-images/satisfaction-guarantee.png" alt="satisfaction logo" />
<p style="font-family:Arial, Helvetica, sans-serif;" class="flex-caption">If You Aren't Satisfied Then My Job Is Not Done!</p>
</li>
</ul>
</div>
</div><!-- FlexSlider -->

then add this to your css

/*  SECTIONS  */
.section {
	clear: both;
	padding: 0px;
	margin: 0px;
}

/*  COLUMN SETUP  */
.col {
	display: block;
	float:left;
	margin: 1% 0 1% 2%;
}
.col:first-child { margin-left: 0; }

/*  GROUPING  */
.group:before,
.group:after { content:""; display:table; }
.group:after { clear:both;}
.group { zoom:1; /* For IE 6/7 */ }

/*  GRID OF TWO  */
.span_2_of_2 {
	width: 100%;
}
.span_1_of_2 {
	width: 49%;
}

/*  GO FULL WIDTH AT LESS THAN 480 PIXELS */

@media only screen and (max-width: 480px) {
	.col { 
		margin: 1% 0 1% 0%;
	}
}

@media only screen and (max-width: 480px) {
	.span_2_of_2, .span_1_of_2 { width: 100%; }
}

Use this page to get responsive grid code http://www.responsivegridsystem.com/calculator/
you input the amount of colums, 2 to 12, and it spits out the code for you to use.

[theremotedr]

Hi,
Ive now got it sorted and it needs one more input to tidy it up.
The tabs Home, Site, Contact etc are on 2 rows & off centered.
Two rows is fine but need them centered to the container box that they live in.
I have tried various codes but no change made.
I thought that these code would work but also made no difference

padding:7px 20px 2px 20px;

margin:auto;

Thanks for the advice.

[mlegg]

Your navigation bar isn't responsive. Take a look at this menu
http://jasonweaver.name/lab/flexiblenavigation/

then download the zip file on GitHub
https://github.com/indyplanets/flexnav

just edit the css file to change to whatever colors you want

[theremotedr]

I have been playing with this all afternoon now.
Various phones & tablets and happy with what i see.

I just need the tabs centered now and im done.