Possible I-Phone Viewing Problem

[babcockam]

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

[scrambler]

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;}

[babcockam]

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?

[babcockam]

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

[scrambler]

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.

 

[babcockam]

Thank you for your help!!

[Author]

Posts