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


this is on iPhone 6


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]

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