-
Posts
-
Hey everyone,
After having the theme for more than 1.5 years I finally started to set up a website. Most of it worked quite well, but I am struggling now with a background image.
I am using the Enfold Law Demo as basis and changed several things. When entering the website, I still have a background image like in the demo. It works fine on desktop, and it also worked fine on mobile devices.
The problem is that I would like to change my background image. When doing this, it works fine on desktop, but not on mobile devices anymore. Using the developer tools in Firefox the background image is shown on all emulated devices. Using 3 different smartphones it does not work.
What I do not understand is, that I have a background image working on all devices. Then I change the background image with the same size and then somehow it does not show on mobile devices anymore. I have not changed any settings. I have even tried it with several images, and it only works with the image that I have previously set. At the moment, I am using the image that works.
I hope you can help me. Thank you very much in advance.
Best regards
willbaerHey willbaer,
Thanks for your question can you create a text page with the image that doesn’t show on mobile so we can investigate the difference between the two pages.
An easy way to clone the page is to Enable the Avia Layout Builder Debugger
This will add a box under the Advanced Layout Builder that shows the page shortcode, you can copy this and create a new ALB page and paste the code in the debugger box and then save.Best regards,
MikeHey Mike,
sorry, for my late reply. I did some testing with copied pages and asked several people to check the pages on their devices.
I was able to figure out the issues. It must be a caching problem on mobile devices. When people were already on the website and refreshed it, the changes did not show up.Are there any settings in the them to force the devices to reload the pages?
And I have found another issue which might be somehow linked to the previous one. At the moment I am working on some details on my website like fonts and spacing. I have done some changes to the ‘separators/whitespaces’. I have changed the “top margin in px = 50px” and the “bottom margin in px = 65px” for all ‘separators/whitespaces’. However, for one separator it does just not work (see screenshot).
I am a total beginner, so please let me know if my approach is totally wrong and if any other information is needed. :D
Thank you very much in advance.
Best regards
willbaerhttps://drive.google.com/file/d/1k1oO9wOeaOXBIAgSHB6Yl6fokxXB2GA-/view?usp=sharing
Hi,
Thanks for the screenshot, but I don’t see any difference in your screenshot or on your site, here is a close up of the two and it still looks the same to me:
As far as your caching, it looks like your server is using lightspeed caching, I would recommend disabling all of your caching until you are done building your site.Best regards,
MikeHi Mike,
thanks for your reply, I meant the space between the elements above and underneath the separator.
My screenshot was obviously not the best. I do not understand why the white space above and underneath the separator is different while the settings of the separators themselves are the same.Do you have any idea?
Best regards
willbaerHi,
Thank you for the update.
The margin values of the second separator are missing px unit (50, 65).
#top .hr.av-jgf4q5kq-41-34d41f50754b868025d6fcf99509f194 { margin-top: 50; margin-bottom: 65; }Please make sure to include px in the margin values (50px, 65px).
Best regards,
IsmaelHey Ismael,
thanks a lot, I was able to fix it. What a stupid mistake, but I am sure that it will not happen again after this :)
Best regards
Michael
- The topic ‘Issues Background image does not show on mobile devices whewirh background image’ is closed to new replies.