Home Forums Weaver Xtreme Theme Possible I-Phone Viewing Problem

Topic Resolution: Answered
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #64499
    Answered
    babcockam
    Participant

    I have had a client unable to see a background image on the top part of this website on an Iphone and Ipad, can someone please pull it up on a computer and an apple device and let me know if they can see an image behind the “For your convenience… Rutherford Auto Body Now Offers Photo Estimates”

     

    THANK YOU!!!!

    Home

    #64501
    Best Answer
    scrambler
    Moderator

    This reply has been accepted as the best answer.

    You are using a fixed background image on the Header widget area.
    Ios does not support fixed background (parallax effect), and has a number of sizing bug associated with it.

    What you need is to add a CSS rule with the ios ipad classes to undo the fixing on these devices

    But first you need to remove the duplicate background, as you added it twice.
    You have added the background twice (I trhink with the CSS+ boxes)
    #header-widget-area {/* background-image: url(“https://rutherfordautobody.com/wp-content/uploads/2020/05/photo-estimates-Slide-copy.jpg”); */background-repeat: no-repeat;background-attachment: fixed;background-position: center !important;}

    .widget-area-header {/* background-image: url(“https://rutherfordautobody.com/wp-content/uploads/2020/05/photo-estimates-Slide-copy.jpg”); */background-repeat: no-repeat;background-attachment: fixed;background-position: center !important;}

    Remove all that you did to add the background image and use the rules below in the Theme Global Custom CSS Rule box

    #header-widget-area {background-image: url(https://rutherfordautobody.com/wp-content/uploads/2020/05/photo-estimates-Slide-copy.jpg);background-repeat: no-repeat;background-attachment: fixed;background-position: center !important;}

    .is-ios #header-widget-area, .is-ipad #header-widget-area {background-attachment:scroll;}

    #64505
    babcockam
    Participant

    I don’t know where the second place I have it added is:

    .widget-area-header {/* background-image: url(“https://rutherfordautobody.com/wp-content/uploads/2020/05/photo-estimates-Slide-copy.jpg”); */background-repeat: no-repeat;background-attachment: fixed;background-position: center !important;}

     

    I did remove it from the css+ box though and added the rule to the Custom CSS Rules box.

    Did it work?

    #64506
    babcockam
    Participant

    Also, is there a code I can use to have the Header Widget display on the Home page only?

    #64507
    scrambler
    Moderator

    It seems the proper CSS is in, I cant test on iOS or Ipad, so you will have to find one to try (go to an apple store selling them)

    You can hide the header widget area on any page by using the option in the page editing page.

     

    #64508
    babcockam
    Participant

    Thank you for your help!!

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.