Results 1 to 9 of 9

Thread: Imgs do not resize for IOS (iPad, iPhone) every other platform works

  1. #1
    Join Date
    Sep 2004
    Location
    Little Falls, Roodepoort, South Africa
    Posts
    406
    Thanks
    4
    Thanked 1 Time in 1 Post

    Question Imgs do not resize for IOS (iPad, iPhone) every other platform works

    Hi

    I have been pulling my hair out for awhile now, as I cannot get my imgs to show correclty on the IOS platforms (iPad, iPhone etc) can someone offer some help....

    My website is:
    http://www.silvertreeestates.co.za

    My CSS code for the imgs is:

    Code:
    .content-front{background:transparent no-repeat center center fixed;-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-size:cover;overflow:hidden;padding:40px 0}
    .ste-content-block{background:transparent no-repeat center center fixed;-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;overflow:hidden;margin-top:100px;padding:60px 0}
    
    #listing{background-image:url(../../img/list.jpg);background-size:cover;background-repeat:no-repeat;}
    #header{background-image:url(../../img/steback26.gif);background-repeat:no-repeat;color:white;background-color:#748178;}
    #value{background-image:url(../../img/value.jpg);background-repeat:no-repeat;color:white;background-color:#00FF00;}
    #ste-services{background-image:url(../../img/about.jpg);background-size:cover;background-repeat:no-repeat;color:black;}
    #team{background-image:url(../../img/team.jpg);background-size:cover;background-repeat:no-repeat;color:#748178;object-fit:none;object-position:50% 50%;}
    #contact{background-image:url(../../img/contact.jpg);background-size:cover;background-repeat:no-repeat;color:white;background-color:#748178;padding-bottom:200px;}
    All help / suggestions fully appreciated, and thanks in advance....
    Last edited by simonf; 06-30-2017 at 12:09 PM.
    Very Best Rgds, Simonf :cool:
    __________________________________
    My Site | E-Mail Me

  2. #2
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    3,035
    Thanks
    25
    Thanked 599 Times in 575 Posts
    Blog Entries
    40

    Default

    Which img in particular because they all looked to fit on iOS here?

    To make things easier for us, try making a reduced demo in JSBin, JSFiddle or CodePe, since those platforms are easier to test and troubleshoot directly on an iOS device.
    Focus on Function Web Design
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps

  3. #3
    Join Date
    Sep 2004
    Location
    Little Falls, Roodepoort, South Africa
    Posts
    406
    Thanks
    4
    Thanked 1 Time in 1 Post

    Default

    HI Beverley

    Thanks for the reply. OK something weird is going on, if I run the site via various mobile simulators it seems to work, but if I go to my old iPadII or a friends iPhone4 it does not, all pictures look like this.

    ipad example vs android:

    iPad II
    Click image for larger version. 

Name:	IMG_0890.JPG 
Views:	18 
Size:	58.9 KB 
ID:	6186

    Android (Samsung)
    Click image for larger version. 

Name:	Snip-it_1499154551128.jpg 
Views:	19 
Size:	96.8 KB 
ID:	6187

    as you can see on the android its perfect, but ios not so much.... thoughts & regards, s
    Very Best Rgds, Simonf :cool:
    __________________________________
    My Site | E-Mail Me

  4. #4
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    3,035
    Thanks
    25
    Thanked 599 Times in 575 Posts
    Blog Entries
    40

    Default

    I see which image you're referring too now, but like I said before, try making a reduced demo in JSBin, JSFiddle or CodePen, because on those platforms, its easier for potential helpers to test and troubleshoot directly on an iOS device. The act of stripping back and refactoring the code will oftentimes help you identify the problem yourself too.
    Focus on Function Web Design
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps

  5. #5
    Join Date
    Sep 2004
    Location
    Little Falls, Roodepoort, South Africa
    Posts
    406
    Thanks
    4
    Thanked 1 Time in 1 Post

    Default

    Hi Beverley

    OK done

    https://jsfiddle.net/SimonRWFish/2vjssbws/7/

    As you will see on these imgs same issue

    Laptop screen shot
    Click image for larger version. 

Name:	fiddle1.jpg 
Views:	21 
Size:	94.1 KB 
ID:	6188

    iPad screen shot
    Click image for larger version. 

Name:	fiddle2.jpg 
Views:	20 
Size:	64.9 KB 
ID:	6189
    Very Best Rgds, Simonf :cool:
    __________________________________
    My Site | E-Mail Me

  6. #6
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    3,035
    Thanks
    25
    Thanked 599 Times in 575 Posts
    Blog Entries
    40

    Default

    I think the "fixed" declaration for background-attachment is what's throwing things off in Safari (it's known for being buggy). This cleaned-up demo without it works fine... but add the "fixed" setting back in and it croaks https://jsfiddle.net/ka4phms0/

    If you're trying to achieve an overall effect of long text that scrolls over a fixed background-image, you'll probably have to change your markup by adding an inner div to each ".big" div, which would then contain long, overflowing text.
    Focus on Function Web Design
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps

  7. #7
    Join Date
    Sep 2004
    Location
    Little Falls, Roodepoort, South Africa
    Posts
    406
    Thanks
    4
    Thanked 1 Time in 1 Post

    Default

    Hi Beverleyh

    Sorry for the delay in response.

    Yes if I remove the "fixed" declaration it does work, BUT then looks like crap on other platforms... pulling hair out for Apple... WTF..... Android fan forever....
    Very Best Rgds, Simonf :cool:
    __________________________________
    My Site | E-Mail Me

  8. #8
    Join Date
    Jul 2017
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Hi Simonf
    Have you found any solution? I have the same problem and couldn't manage to solve it.

  9. #9
    Join Date
    Sep 2004
    Location
    Little Falls, Roodepoort, South Africa
    Posts
    406
    Thanks
    4
    Thanked 1 Time in 1 Post

    Default

    HI

    Welcome etc... No not yet.... as I said below if i remove the "fixed" declaration it does work. But everything else gets messed up on other platforms so still looking for the answer if you find one let me know as well please
    Very Best Rgds, Simonf :cool:
    __________________________________
    My Site | E-Mail Me

Similar Threads

  1. Website not correct on ipad or iphone
    By mcolton in forum HTML
    Replies: 10
    Last Post: 03-09-2017, 09:06 AM
  2. Replies: 4
    Last Post: 11-09-2016, 05:26 AM
  3. Youtube Video Gallery - NOT showing on Ipad or Iphone. Please help.
    By Bizzmaxx in forum Dynamic Drive scripts help
    Replies: 9
    Last Post: 04-16-2016, 10:57 AM
  4. code not working in safari iphone and ipad
    By vinpkl in forum JavaScript
    Replies: 4
    Last Post: 05-14-2015, 12:12 PM
  5. Ultimate Fade In Slideshow--Freezes on ipad and iphone
    By dcarlson in forum Dynamic Drive scripts help
    Replies: 3
    Last Post: 01-26-2013, 06:27 PM

Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •