Hi Ismael,
Thanks for your patience and hard work on this! The latest code snippet above definitely helped and there are no longer the huge “zoomed in” images on the fixed images on iPad Safari. Is there any way you can access a VPN so you can see the page?
One thing that’s funny is that the images now display, but they are just a little smaller than the other images (that are set to scroll, not fixed) and so there’s a little white border next to them. Definitely better but if there’s a slight tweak to get them to stretch we would be 100%.

Thanks,
Rob

see private content

Hi Ismael,
Are you getting a cloudflare error? I have turned off Geoblocking there but I think WP Engine has some geoblock rules in place because we had a bot attack a few months ago.

I’m on a trip without my iPad so I can’t check this weekend but please keep this thread open and I’ll test it as soon as I can.

Best,
Rob

I just realized that the reason I thought this was fixed is because it is fixed on Chrome on the ipad. However, on Safari, it does not fix the issue. I chatted with GPT and Gemni, and the latter came up with this which doesn’t work either:

/**
* Consolidated iPad Background Image Fixes – Attempt 2
*/

/* Target iPads (both portrait and landscape) */
@media only screen and (max-width: 1024px) {
.avia_mobile .avia-full-stretch,
.avia-bg-style-fixed {
background-attachment: scroll !important;
}
}

/* Specific fix for Safari on iPad in landscape mode */
@media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 1) {
.avia-bg-style-fixed {
background-size: cover !important;
background-position: center center !important;
background-attachment: scroll !important; /* Ensure it’s still scrolling */
}
}

Gemni also recommended I do a solution with javascript but I’m not wanting to start adding custom js to the site.
`<script>
(function($) {
$(window).on(‘orientationchange’, function() {
if (window.innerWidth >= 768 && window.innerWidth <= 1024 && Math.abs(window.orientation) === 90) {
// Force a repaint/reflow on iPad landscape after orientation change
$(‘.avia-bg-style-fixed’).each(function() {
$(this).css(‘background-image’, $(this).css(‘background-image’));
});
}
});
})(jQuery);
</script>

If we can’t fix it, is there a way to make Safari only show the portrait orientation (which are smaller, mobile photos) vs the landscape, while Chrome would still use the larger color sections / background photos in landscape mode?

Sorry this one is a beast…

Thanks
Rob

Yes, that fixed it! Is this a known issue or is there a setting I need to change or ?

Thanks,
Rob

Hi Ismael, thanks for your response. I believe Cloudflare was set up to block many countries during a bot attack. Do you happen to have a US VPN yu can use? I’ll see if there’s a way to turn off the geofencing.

Thanks,
Rob

Thanks Ismael. I assume I should add this under “quick css”?

Thanks,
Rob

Thanks Mike. Have a nice Thanksgiving!

WOW my old thread has a new life!

FYI, I ended up using Smart Slider Pro to achieve this and other full screen video effects. A lifetime license is very reasonably priced and their support is Enfold level – excellent!

Best
Rob

Hi Mike,
Thanks for the prompt response. I am not a css programmer so I appreciate your help.

Here is the page:
https://www.thomashenthorne.com/21-edgewood-way-san-rafael/

I found this old thread that seems to solve what I would want to do:

Can you help me figure out the page id and the css I would add so just that color section is modified?

Thanks much,
Rob

Guenni, thanks for jumping in and I hope you are well.

The “marin real estate blog” page was showing unpublished (no idea why… it has been there forever) and so I published it again, selected it in main theme options, did a 301 rediirect from the mysterious -2 page and everything seems to be working.

I am curious to know why this happened but glad it’s ok now.

Hi Mike, I thought it enabled some tools with the classic editor, which I use in conjunction with ALB. There are also some new font handling mechanisms I believe but that may duplicative of what already exists in Enfold?

Maybe we leave this open and see if anyone has dug into 6.5 since the documentation is so minimal…?

Thanks much!
R

Hi Ismael!
It’s not the Separator/Whitespace element I’m speaking about, it’s the Post Metadata element. If you open that element you’ll see it spelled “Seperator”

“Seperator
Will be used to seperate multiple metadata”

Let me know if you want a screenshot. You guys are great for caring about this little minor misspelling! The new custom element has saved me hours of work today, thanks again! ;)

Best
Rob

Hi Günter,
That worked beautifully!!!

Thank you!!!

I hope this thread helps others with this. The use of a #customelement in ALB will be a huge time saver for me. I didn’t know it was even an option!

Best,
Rob

#ALB #customelement