
-
AuthorPosts
-
April 15, 2016 at 4:57 am #614540
Hi there,
I am having trouble removing background images for mobile browsing of a site i am working on. I have looked through many forum posts and tried the solutions but i cant get anything to work. I currently have the below code in my quick CSS section and have cleared the browser cache on my mobile many times but the background images still seem to be there.
@media only screen and (max-width: 480px) {
.home div#av_section_1 { background: none !important; }}I have also previously tried the below code for a specific background image using a custom ID but with no luck
@media only screen and (max-width: 989px) { div#hp_bgr_1 { background-image: none!important; } }
April 15, 2016 at 6:33 am #614567Hey pd8888!
Please try the below CSS in quick CSS
@media only screen and (max-width: 768px) { #top #av_section_1.avia-section { background-image:none!important; }}
Best regards,
VinayApril 15, 2016 at 7:21 am #614590Hi Vinay,
Thanks for your reply. I have tried this in my quick CSS, cleared the browser cache on my mobile several times and i am still seeing background images on my mobile.
Cheers,
Pete.
April 15, 2016 at 8:55 am #614635Hey!
The code is tested on our installation and it should work for you too… We would like to take a closer look please create a temporary user with ‘administrator’ role and share in private content with permission to deactivate all plugins and add custom code if necessary to help you resolve this issue.
Best regards,
VinayApril 15, 2016 at 9:46 am #614663Hi Vinnie,
Thanks i’ve included requested details.
Cheers,
PeteApril 15, 2016 at 10:10 am #614685Hi!
The code works fine please hard reload the site and review the homepage. To do a hard refresh… First press F12 to open the Chrome Dev Tools then hold down Ctrl and click on the Reload button.
Cheers!
VinayApril 15, 2016 at 10:26 am #614697Hi Vinnie,
It works in browser when re sizing the screen using the Chrome toggle device mode but when i view the site physically on a smart phone (iPhone 6) i am still seeing the background. I am using a chrome browser on iOS 9.3.1 and have been choosing the Clear All browser data to flush everything and reloading the page multiple times however i still see the background. Ideas?
Cheers,
Pete.
April 15, 2016 at 4:11 pm #614951Hi!
Thanks for bringing this to our notice. It will require a jQuery solution. We need a little more time to work on a custom script for you. we will update this ticket soon.
Regards,
VinayApril 18, 2016 at 1:35 pm #616444Hey!
Thank you for your patience.
Please add the below code to functions.php
// Remove color section background function external_links(){ ?> <script> jQuery(window).load(function(){ if (jQuery(window).width() < 768) { jQuery("#bg-desktop-only").css("background-image", ""); } }); </script> <?php } add_action('wp_footer', 'external_links');
Add custom ID “bg-desktop-only” to the color section and add your background image.
The script works when the page is loaded for example if you load the page on mobile it will remove the bg image. But if you re-size the window it will not execute.
Regards,
Vinay -
AuthorPosts
- You must be logged in to reply to this topic.