Mobile friendly upgrade

[theremotedr]

Hi,
I am currently having a go at upgrading my site so its mobile friendly & so far doing ok.
But At the moment i need your help if i may on one thing.

Here is the page in question.
http://www.theremotedoctor.co.uk/karford.html

What i would like to do is the following,
When you first come to this page you will see a default image "currently Responsive Image Test"
To the right there are 2 items for sale.
When the customer selects an item i would like that item to be shown where you currently see "Responsive Image Test"
The item will be a 640 x 480 image.

Many thanks for the help.

[mlegg]

In your normalize.css section you have /embedded content
look for img and add this:


width: 100%!important;height: auto!important

[theremotedr]

Hi,
That makes the car manufacturer larger.
Please look here
http://www.theremotedoctor.co.uk/karford.html

On the right you will see,
BLUE CHIP KEY ID60
RED CHIP KEY ID4C

When you click one of these i would like the corresponding image then shown when you currently see the blue image "Responsive Image Test"

[theremotedr]

Since my last post ive managed to sort of figure it out.
Using this page as an example, http://www.theremotedoctor.co.uk/karfiat.html
Selection is made and image placed within border.
I have an issue when viewing on the iphone.
Selection made but image is outside of the border & not resized,see screen shot below.

Please could you view my code and advise as i know its sometime to do with the mobile responsiveness but cant put my finger on it.

http://i670.photobucket.com/albums/v...phoneissue.jpg

[BorderTerroir]

I've just looked on my desktop PC and the image is outside of the border & not resized.

That's using FireFox. How many browsers are you testing with?

[theremotedr]

I am also using Firefox so i assume that i have done something incorrect.
Looking on Chrome the item is to the right of the placement border where i would like it.
This then explains why i have the same issue on the iphone.

Can you advise the correct way that i need to show the image where i require it.

Thanks.

[mlegg]

your css is so long for me to search through, so do you have this for your responsive image code in the main css sheet?


img {
max-width: 100%;
height: auto;
}

You should have the viewport code in the head before your body tag

<meta name="viewport" content="width=device-width, initial-scale=1">

[mlegg]

Do you have media queries on the main css sheet?


/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles */
}

/* Desktops and laptops ----------- */
@media only screen
and (min-width : 1224px) {
/* Styles */
}

/* Large screens ----------- */
@media only screen
and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}

[theremotedr]

Hi,
Since the last post I've had to delete that script because it was causing issues on the iPhone.
I read that using iframe conflicts with CSS so this is why I was having an issue.
Script deleted and iphone fine now.
The code used on my site works fine BUT I just need a basic script so when a link is selected an image is shown in my div.
Nothing fancy just click the link and show the photo in a div of my choice.
http://www.theremotedoctor.co.uk/karford.html
I've tried a couple of scripts but when the link is selected the image on a new page.
Not being 100% CSS minded I didn't know the answer.

Coothead did a script for me a year or two ago which was spot on but do you think I can find it.

[mlegg]

Do each of the pages have different css style sheets?
The one on the main page works fine with all of the different sized screens. It is responsive. Why is this new page http://www.theremotedoctor.co.uk/karford.html not using the same css?

[theremotedr]

I have now sorted this out.

[mlegg]

What did you do?

[theremotedr]

Added a script & J query,check out the page for the code