Media Query advice for ipad 1

[theremotedr]

Here is my index page in question http://www.theremotedoctor.co.uk/index.html

On my ipad 3 the view is the same as the PC which is fine.

I also have an ipad 1 but the view is the same as on the iphone & think it should be the same as ipad 3 & PC,maybe the media querie would fix it ?

So i am looking to get the same view on the device

In the basic css file line 308 the original code was,

@media only screen and (min-width: 481px) {

I have tried the following to try & get the same view but no such luck.

@media only screen and (min-width: 481px) {

@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape)

@media screen and (device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 1)

This ipad 1 does not rotate the screen so Landscape is only applicable.

Can you advise any help please.

[mlegg]

https://gist.github.com/needim/d15fdc2ac133d8078f7c

[theremotedr]

Hi,
I tried the following

/* iPad in landscape */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
But it altered the display on my pc even though the resolution of ic is 1600 x 1200 ?

I thought just by changing the 920 to 768 would do it but not ?

@media only screen and (min-width: 768px) {

[mlegg]

why not just edit your css and add all that at the bottom where your media queries are? I have that on lots of pages that I've made and never had an issue

[theremotedr]

To be honest I'm not to sure about that.
I thought I could just add the media query and add the code to it.
That didn't work at all.
I can make my devices look like the iPad 1 but can't make the iPad 1 look like the other devices.

[mlegg]

you could also test it by editing your css to add all of that code and name is styles2.css
then edit your index.html and change your original css sheet to styles2.css and save it as index2.html
then upload it and open your site and open your site but put http://www.theremotedoctor.co.uk/index2.html in the address bar

this is what your view is on iPhone 3, your social media bar on the left and bottom overlap your page content
5864

this is on iPhone 6
5865

try free mobile site checkes like
http://youresponsive.com/

http://www.mobilephoneemulator.com/

[theremotedr]

The iPhone isn't a problem.
It's the iPad 1 or original some people call it.

My iPad 3 show in the index page the tabs which once clicked on has a drop down box.
My iPhone shows menu, you click menu then you have one long list.
My iPad 1 has the same view as the iPhone BUT I am trying to get the view the same as the iPad 3

[mlegg]

Did you try adding those media queries to your css?

[theremotedr]

Yes.
But it then altered the PC view.

[theremotedr]

5866
5867
These are the views from both iPads.
Im trying to get the ipad1 to show the image like the example of PayPal in it.

[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;
5868

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.