Is there a way to prevent the background resizing on mobile when an item is expanded?
Hello Lance,
I have checked your site and I do not see any difference when I open an accordion item.
Please check out the following images:
Collapsed:
Expanded:
Could you please clarify your issue a little further?
Thanks.
When I look at it on an iPhone or iPad in Chrome or Safari that section doesn’t look like it does on a normal screen, like in your screenshot. The background is expanded and distorted, and any time you click and open an accordion item the background grows with it, and if you close the item it shrinks back. It would be great to fix that, otherwise I will have to come up with completely different sections for mobile with no background image.
Hello Lance,
I went ahead and resolved this issue. I added this custom css in the theme options > custom css section:
@media(max-width: 979px){
.fixed-bg .x-bg .x-bg-layer-lower-image {
background-color: #e8e8e8;
background-size: auto 900px !important;
background-position: top right !important;
}
}
Please check your site now.
I cleared the cache and I don’t see a fix - if you look at the first accordion with the background with the pills and a cup of tea, on mobile now there is no background. If you look at the faq accordion at the bottom of the page with the picture of the girl in the background, it still behaves the same on mobile - it doesn’t scroll over the background pic, and if you click on an accordion item it expands the background pic?
Hello Lance,
You must apply the custom fixed-bg to the section to make the code work. As I understand, you have different sections that displays in different screens. Please add the custom class to the section that displays in smaller screens and test your site again.
Please let us know how it goes.
The top accordian with the pic of the cup of tea is active on all screens and already has fixed-bg applied. The one on the bottom has a second section and I added that to it. All that seems to happen when I look at it on mobile is that the background image has disappeared?
Hello Lance,
The only background image that disappeared is the section with equal columns. When I check your site on my mobile, this is what I am seeing:
Bottom section:
The bottom section, the background image looks its gone because it is position to the right. We need to change it and position the image to the left instead. I have edited the sections and it’s custom classes and I also updated the css into this:
@media(max-width: 979px){
.fixed-bg .x-bg .x-bg-layer-lower-image {
background-color: #e8e8e8;
background-size: auto 900px !important;
background-position: top center !important;
}
.left-bg .x-bg .x-bg-layer-lower-image {
background-position: top left !important;
}
.right-bg .x-bg .x-bg-layer-lower-image {
background-position: top right !important;
}
}
Please check your site now.
Hmmm. Maybe I’m doing something wrong. I cleared the cache on my iphone and got what you see in the attached, and I tried on a friend’s phone and got the same thing?
Hello Lance,
I do not see any issues on my mobile phone. I can see the background images as expected.
Please clear your mobile phone’s browser cache or use private browsing mode and test again.
Regards.
That’s good news. I have cleared my cache on chrome and safari on two iphones as well as trying in private mode and still no images there. Could it be an iphone vs the kind of phone you have issue?
Hello Lance,
If the background image is displaying in desktop screens and displaying in an android phone which I also have been testing your site with, then there is a problem with the phone are using. It could be a browser cache issue I guess. Please install Chrome in your iPhone and test it both in Chrome and Incognito mode of Chrome.
Please let us know how it goes.
I had 3 other people that have never visited the site look at it on their iphones in safari and chrome normally and in private mode - looks the same on all of theirs, no pictures in the background.
Hello Lance,
Your homepage only have one section bearing the “ingredients” ID isn’t it? Does this section appeared in your desktop? This section displayed in your mobile phone right? The only reason I could think of why the background image will not display in your end is that maybe the image is blocked somehow. I do not have any issues viewing it by the way. I will ask my colleagues to check your page as well and post a screen cap from their phone as well.
Thanks.
Correct, it is the only section called “ingredients” and it displays on all screens including mobile, but the background image doesn’t appear on iphones. The background also doesn’t appear on the sections called “faq” and “faq-small” - the small one is what appears in the smallest two breakpoints, pads and phones. I don’t know, we can’t see the background on any idevice…
Hello Lance,
Are you using Safari on the iPhone? Please install Chrome browser in your iPhone so that you can compare the results. Meanwhile, I have updated the custom css into this:
/* fixed back still for mobile with accordians */
@media(max-width: 979px){
.fixed-bg .x-bg .x-bg-layer-lower-image {
background-color: #e8e8e8;
background-size: auto 900px !important;
background-position: top center !important;
background-attachment: scroll !important;
}
.left-bg .x-bg .x-bg-layer-lower-image {
background-position: top left !important;
}
.right-bg .x-bg .x-bg-layer-lower-image {
background-position: top right !important;
}
}
Please test your site again using Safari and Chrome in your iPhone.
It works!!! Thank you so much!
You’re welcome!
We’re glad we were able to help you out.
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.