Hi there,
I haven’t had any luck getting the jumbotron images to show on mobile for my site. They don’t display at all - not on the home page or on the blog pages. I’ve tried all the css posted to various other threads in this forum and nothing has worked. They don’t display wrong or skewed; they just don’t display at all. The site is http://pulsedigital.ca - please let me know what you suggest.
Thank you,
Michelle
Upon further inspection - a look from my iPad in landscape format - I can see that the image is there, but it’s grabbing such an incredibly small portion of the image that it appears as if it’s not there on the smaller screen. Ideally, the mobile headings and two buttons, logo and navigation would all be shown in every mobile format on top of the image. The image can be either centered with the sides cut off, but it needs to scale down for sure.
Please advise. I’m surprised that this much custom css is required for the images to work with this theme.
Hello @pulsedigi,
This seems to be an issue on iOS, so we started an investigation about it and hopefully we’ll get it sorted via a theme update in the shortest time.
Sorry for the inconvenience!
Regards
Yup. Having the same issue on all iOS devices. Jumbotron works fine on Mac, PC (Safari, Chrome, Firefox, Edge) and problem is only on iPhone/iPad. Have you found time to address this yet? It just looks horrible on iOS.
Hi all,
please use this css code to fix:
@media only screen and (max-width: 768px) {
#header {
background-attachment: initial !important;
}
}
thank you,
Cristian
Alright Cristian! That worked fine. Thanks so much.
Hi, I tried this custom CSS on our site, but it hasn’t solved the problem. Header images show fine in any other browser except IOS/safari where they are heavily magnified and look very poor. Have a look at Wellfound.org.uk on an IOS device and compare the photos on any of the pages with the same view on chrome or another browser. Any ideas for how to solve please?
Just an addition to my previous post. The header images display perfectly on an iPad in portrait format. I’ve found that the problem only occurs in landscape format. Then one small part of the image is used, blown up to fill the required space. Thanks in advance.
Third and final posting on this topic. I’ve managed to sort it. The iPad screen in landscape is 1024px, so replace the 768px with 1024px in the CSS in the posting above, and it works fine for me for landscape and portrait. Just posting in case this helps others.
This solution does not work on Ipad Mini. I have posted a question. Please advice what to do. have the same problem. Works in portrait but not in Landscape.
Thanks