Newbie with iphone not responsive issue

[theremotedr]

Hi,
Ive been trying hard to put my finger on this fault without any
success.
I have a slideshow on my page but the images do not resize when viewing on the iphone.
Here is the page in question http://www.theremotedoctor.co.uk/z9.html
The photos used are 640×480 and have the same effect on the iphone4 or iphone5

Having said that here is another page from my site http://www.theremotedoctor.co.uk/z9.html
If you select Smart remote the 640×480 image is loaded & when viewing on the iphone 4 & iphone 5 they are resized no problem.

This is why i am now confused.
If you could take a look and possibly advise that would be great.

Many thanks.

[timbarden]

Hi,

The problem lies in the width and height applied to the slideshow container, ie #slidedom. The slideshow function is applying a fixed width of 650px and height 578px, hence why the img inside is not resizing on smaller screens.

If you change the slideshow function to set #slidedom to width: 100%; max-width: 650px; height: auto; then that should makes the images responsive again.

[theremotedr]

Hi,
Is this within a css file if so which one.

Thanks for the quick reply.

[timbarden]

No, you’ll need to adjust the Javascript function in the HTML file. Looking at the source code, line 223 is the one to edit. Try something like this:

document.write('<div id="slidedom" style="width: 100%; max-width: 650px; height: auto; background-color:'+slidebgcolor+'"></div>')

This will mean the variables slidewidth and slideheight on lines 181-182 no longer do anything, so probably worth removing these two lines.

[theremotedr]

Hi,
I just found that line as email received.
Ive now changed it and perfect on the iphone.

Having said that could you take a look on the pc as there has been a layout change.
The contact details have shifted down the page & there is a blink of the page if you watch it for a minute.

Thanks for the help.

[timbarden]

Ah yes, within the style tag on the line you just edited, there was a float: left; there previously that needs to be reinstated.

As for the blink, there seems to be a missing image/broken image link that was there previously – not sure if that’s what you mean?

[theremotedr]

Do you have a copy of the float code.

I did not see it,i inserted the new code before i deleted the other and it was like below.

document.write('

<div style="width:'+slidewidth+';height:'+slideheight+';background-color:'+slidebgcolor+'"></div>

')

document.write('

<div style="width: 100%;height: auto;background-color:'+slidebgcolor+'"></div>

')

[theremotedr]

I have put the float back if you could check it but pc still the same.

[timbarden]

Oh that’s wierd, I swear there was a float in there originally. Anyway, just add it in like this and that should be enough.

document.write('<div id="slidedom" style="width: 100%; max-width: 650px; height: auto; float: left; background-color:'+slidebgcolor+'"></div>')

[theremotedr]

Spot on & works a treat.
I only seen the float in line 182 var slidewidth=’650px; float: left’

I also need to ask a question regarding smooth scroll,shall i start a new topic ?

[timbarden]

Ah, yes that’s where it was.

Yeh, I would suggest starting a new topic. Also, a question about smooth scrolling would likely be best posted (and answered) in the Javascript Jungle!

[theremotedr]

Ok
I will post there now.

Watching the slideshow on the pc for say 2 minutes there is a glitch.
No links broken etc though

[Author]

Posts