I just published an update to a site I built last June and notice that the pages that include an iframe used to have scrollbars on my iPhone 6. Now there are no scroll bars on either the old or on the new site – the iFrame height is auto-expanded to include all the content regardless of size.
My iPhone been updated by Apple recently and I wonder if this remedied the annoying scrollbars? Would someone please visit https://faithcentre.info (old site) or https://faithcentre.info/fcnew (new site) to see if the scrollbars display on your devices? Try the Home, Events, and Wellness pages. Curious if this is happening on just my iPhone or if it also occurs on Droids.
hi @randyrie, all good on an Android Fone (dont ask what version, not the latest, but fine.
Checked both sites…and AMAZING! … You’re American but
KNOW HOW TO SPELL CENTRE CORRECTLY! (not that CentER version that throws me all the time with CSS)
And, thanks for posting something! I’ve been climbing the walls , staring, waiting for someone to say something for TWO DAYS! … not a sausage, a peep, a squeak a nada!
… Cabin fever
1 Like
Thanks for checking and the feedback, schpengle. While I’m learning this stuff, I’ll have MANY, MANY questions to ask that’ll keep you hopping, so stay tuned.
As for the spelling, it’s old English from our colonial days and is the name of the organization so I dare not correct their spelling or I’ll be put on a boat back to ol’ England, probably in chains. 
And still wondering why those %$#* scrollbars were showing on my iPhone earlier…
1 Like
because your css sucked? 
Hee hee
All done now mate. well done on the site.
1 Like
That’s the rub… I haven’t touched my old site or any of its ‘sucky’ CSS and yet the scrollbars have vanished. I wish it was something in the CSS that I knowingly changed so I can sleep tonight. I just checked another site that I published a year ago and its iframe also no longer displays any scrollbars on my iPhone… so I’m believing Apple did change their IOS to work better with iframes and scrollbars?
I might be wrong - indeed. But even on desktop Safari, you can set the behaviour of the scrollbars - so perhaps you can do this on cell-phones as well? Or you can even force your page showing them permanently? Wait - I’ll have a Google for this:
http://simurai.com/blog/2011/07/26/webkit-scrollbar
The point is, that iFrame and other “force-to-scroll” techniques (css spoken overflow: hidden) are not user-friendly. The required scrollbars are space consumers and it’s pretty hard to scroll in-page on touch anyway.
We had this discussion, as far as I remember, a while back. Certainly - without having scrollbars permanently, it’s not really obvious that there is hidden content - but that’s a designer’s decision - he’s the culprit. So many things are not necessarily a “technical decision”.
Cheers
Thomas
To keep you ‘off of the walls’… I have another question.
I’m trying to add a page to a website I’m building that will enable text to scroll over a background image (which I’ve done using Pinegrow’s background image tool - see: http://statecollegedev.com/taliya). However, I now need to add @media code to get the background image to resize properly, depending on device size. I’ve found CSS code that succesfully changes the background color per device size, but I cannot get the images to load. I’ve created four images that have been re-sized per the device’s screen and am trying to have the CSS load them - which doesn’t work. (see http://statecollegedev.com/taliyatest).
I’m attaching a screen shot of the CSS that does change the body color but does not load any of the background images. I have placed nothing in the HTML since I don’t know if that’s necessary or, if I DO need to add something, I don’t know what or where to add it.
I’ve also asked Printninja for help so hopefully between you two experts, I can get pointed in the right direction to get this to work.
I’m not sure about image-url there @randyrie
have you looked at this?
particularly this
with regards what you are trying to achieve above.
Providing your image path is actually correct that is… that is usually what I get wrong.
I’ve changed the CSS to:
But this doesn’t work either. See http://statecollegedev.com/taliya
Any ideas what I’m doing wrong?
BTW, I found a good tip on the web that really helped to keep the image from enlarging and flying off center (works perfectly on my desktop but fails miserably on my iPhone which is why I want to swap out to a smaller image that will display properly on mobiles. See the code I inserted in the body tag:
