Hi, for some weird reason the backgrounds are not responding to the display size on the iPad in landscape. This has me baffled as it works on any other tablet fine. Tried it in both safari and chrome! Any help with this would be great.
Thanks for that. But the issue still remains for whatever reason?
If I use dev tools in Chrome and select the iPad in device list it works fine. But on the actual iPad itself it seems to show the background images as full size?!?!
Removing the fixed attachment worked. But now I obviously dont have the parallax scrolling effect.
That bit of CSS alone didnt do the trick.
Could it be because iOS uses the height of the 'document' and not the 'viewport'? What if we add the 'fixed' positioning to the 'body' itself and not the 'background'? Just don't know how to go about it and if it will mess anything else up.
So there's no way of getting this sorted just now? Will Elementor have a solution? I obviously dont want to start messing with the body css as it will effect other parts of the site.
I will see and report to them the issue, what you can do for now and don't mess anything is simply go to the Appearance > Customize > Additional CSS and add this as a class.
.elementor-fix-zoom { zoom: 1; }
So, after that you can add it as a class to the section, so you don't have to worry that you will break other things.
Kind Regards
Subscribe to our newsletter to get the latest updates about NeuronThemes and join our community Facebook Group.
Hi, I added the CSS to the Additional CSS section of the customizer then added the class to the 'section' that the background is attached to and still no luck?!?!
It just seems to effect the background in landscape. Portrait mode the image resizes to 100% height as expected.
Elementor seems to disable the attachment fixed from 1025 pixels and below. https://prnt.sc/p7tjzr
Min-width means it starts from 1025 and up. The size of your tablet may be larger so that's why it is not working properly, you can add the following style and it will disable the attachment in earlier pixels.
Hi, for some weird reason the backgrounds are not responding to the display size on the iPad in landscape. This has me baffled as it works on any other tablet fine. Tried it in both safari and chrome! Any help with this would be great.
Thanks
Hi,
So, the size cover is not working properly on the tablet landscape. Can you please try add the following style.
html { height:100%; min-height:100%; } body { min-height:100%; }Please let me know if it works.
Feel free to ask for anything you need.
Kind regards
Subscribe to our newsletter to get the latest updates about NeuronThemes and join our community Facebook Group.
Hi,
Thanks for that. But the issue still remains for whatever reason?
If I use dev tools in Chrome and select the iPad in device list it works fine. But on the actual iPad itself it seems to show the background images as full size?!?!
Hi,
I've been searching and searching, could not find any properly simulator, since in our office we don't have any tablet, sorry.
I have two options
1. Can you please try to remove the fixed attachment and see if that fixes it.
2. Add the following style.
.elementor-section-full_width {
zoom: 1;
}
Kind Regards
Subscribe to our newsletter to get the latest updates about NeuronThemes and join our community Facebook Group.
Hi,
Removing the fixed attachment worked. But now I obviously dont have the parallax scrolling effect.
That bit of CSS alone didnt do the trick.
Could it be because iOS uses the height of the 'document' and not the 'viewport'? What if we add the 'fixed' positioning to the 'body' itself and not the 'background'? Just don't know how to go about it and if it will mess anything else up.
Hi,
Good to know, we'll talk to the Elementor directly to add that as feature.
Yes, that could be the exact reason.
Feel free to ask for anything you need.
Kind Regards
Subscribe to our newsletter to get the latest updates about NeuronThemes and join our community Facebook Group.
So there's no way of getting this sorted just now? Will Elementor have a solution? I obviously dont want to start messing with the body css as it will effect other parts of the site.
Hi,
I will see and report to them the issue, what you can do for now and don't mess anything is simply go to the Appearance > Customize > Additional CSS and add this as a class.
.elementor-fix-zoom {zoom: 1;
}
So, after that you can add it as a class to the section, so you don't have to worry that you will break other things.
Kind Regards
Subscribe to our newsletter to get the latest updates about NeuronThemes and join our community Facebook Group.
Hi, I added the CSS to the Additional CSS section of the customizer then added the class to the 'section' that the background is attached to and still no luck?!?!
It just seems to effect the background in landscape. Portrait mode the image resizes to 100% height as expected.
Hi,
Can you please let me know in which section, you have added the class? So I can inspect it and see why it is not working.
Kind Regards
Subscribe to our newsletter to get the latest updates about NeuronThemes and join our community Facebook Group.
On the home page on the top section. I can see the class is added in the source code so dunno why its not working. I hate iOS haha.
Hi,
I'm a bit lost while doing research now, attachment fixed is definitely not supported in IOS devices.
- https://stackoverflow.com/questions/23236158/how-to-replicate-background-attachment-fixed-on-ios
- https://stackoverflow.com/questions/20443574/fixed-background-image-with-ios7
Elementor seems to disable the attachment fixed from 1025 pixels and below. https://prnt.sc/p7tjzr
Min-width means it starts from 1025 and up. The size of your tablet may be larger so that's why it is not working properly, you can add the following style and it will disable the attachment in earlier pixels.
@media (max-width: 1200px) { .elementor-section { background-attachment: initial !important; } }Background attachments: source
You can change the 1200 number to any pixel you need, check the tablet width and make sure to make it larger than it.
Feel free to ask for anything you need.
Kind Regards
Subscribe to our newsletter to get the latest updates about NeuronThemes and join our community Facebook Group.
I think this did work, but what about background images in columns?
Hi,
Well, it should work the same in column as in section, I guess. The problem is mainly to the IOS devices and attachment property.
Maybe changing from initial to scroll will fix it?
@media (max-width: 1366px) { .elementor-section { background-attachment: scroll !important; } }This will basically remove all the attachment fixed.
Helpful articles:
- https://stackoverflow.com/questions/24154666/background-size-cover-not-working-on-ios
- https://stackoverflow.com/questions/23236158/how-to-replicate-background-attachment-fixed-on-ios
Feel free to ask for anything you need.
Kind Regards
Subscribe to our newsletter to get the latest updates about NeuronThemes and join our community Facebook Group.