- This topic is empty.
May 6, 2015 at 12:40 pm #201762
Ive been trying hard to put my finger on this fault without any
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.May 6, 2015 at 1:00 pm #201763
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
width: 100%; max-width: 650px; height: auto;then that should makes the images responsive again.May 6, 2015 at 1:06 pm #201764
Is this within a css file if so which one.
Thanks for the quick reply.May 6, 2015 at 1:28 pm #201765
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.May 6, 2015 at 1:36 pm #201766
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.May 6, 2015 at 1:44 pm #201769
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?May 6, 2015 at 1:58 pm #201772
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> ')May 6, 2015 at 2:08 pm #201776
I have put the float back if you could check it but pc still the same.May 6, 2015 at 2:26 pm #201777
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>')May 6, 2015 at 2:32 pm #201778
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 ?May 6, 2015 at 2:39 pm #201779
Ah, yes that’s where it was.
I will post there now.
Watching the slideshow on the pc for say 2 minutes there is a glitch.
No links broken etc though
- The forum ‘CSS’ is closed to new topics and replies.