Viewing 20 posts - 1 through 20 (of 20 total)
  • Author
    Posts
  • #680922

    I am using a fixed background in every color section but the background picture makes the site look messed up on mobile phones. I would like to make it so that on mobile there would be no background picture.

    I am using the following css but it doesn’t seem to work:

    @media only screen and (max-width: 787px) {
    #av_section_2 {background-image:none !important}
    }

    Is there a way to set it so that there’s no background picture on mobile?

    #680960

    Hey dirtdiggr,

    Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child themes style.css file:

    @media only screen and (max-width: 767px) {
    #splash {
        background-image: none!important;
    }}

    Best regards,
    Vinay

    #680969

    Thanks Vinay but that doesn’t work. It works when checking on desktop but it doesn’t work if you’re checking on a mobile phone (android).

    #681014

    Hi,

    Please try adding this at the very end of your themes / child themes functions.php file:

    // Remove color section background
    function external_links(){
    ?>
    <script>
    jQuery(window).load(function(){ 
    	if ($(window).width() < 768) {
    		jQuery("#splash").css("background-image", "");    
    	} 
    });

    Best regards,
    Vinay

    #681020

    There’s something wrong with the code?

    Parse error: syntax error, unexpected end of file on line 78:

    });

    • This reply was modified 7 years, 7 months ago by dirtdiggr.
    #681529

    Hi,

    Please send us a temporary admin login so that we can have a closer look. You can post the details in the Private Content section of your reply.

    Best regards,
    Rikard

    #681579

    Ok

    #681599

    Hey!

    Please review the site now we have modified the code in functions.php

    // Remove color section background
    
    function custom_excerpt(){
    ?>
    <script>
    jQuery(window).load(function(){ 
    	if ($(window).width() < 768) {
    		jQuery("#splash").css("background-image", "");    
    		jQuery("#casts").css("background-image", ""); 
    		jQuery("#about").css("background-image", "");    		
    	} 
    });
    </script>
    <?php
    }
    add_action('wp_head', 'custom_excerpt');

    Best regards,
    Vinay

    #681601

    Thank you but it didn’t get rid of the background picture on mobile.

    View post on imgur.com

    #682398

    Hi,

    Please try the following in Quick CSS under Enfold–>General Styling:

    @media only screen and (max-width: 767px) {
    #about {
        background-image: none !important;
    }
    }

    Regards,
    Rikard

    • This reply was modified 7 years, 6 months ago by Rikard.
    #682679

    Thanks for replying Rikard but that doesn’t work. It works on a desktop browser but on my phone (android) the background is still there.

    Your code is does the exact same thing as the one above:

    @media only screen and (max-width: 767px) {
    #splash {
    background-image: none!important;
    }}

    #683636

    Hi!

    We updated the code to

    // Remove color section background
    
    function remove_bg(){
    ?>
    <script>
    jQuery(window).load(function(){ 
    	if (jQuery(window).width() < 768) {
    		jQuery("#splash").css("background-image", "");    
    		jQuery("#casts").css("background-image", ""); 
    		jQuery("#about").css("background-image", "");    		
    		jQuery("#av_section_4").css("background-image", "");
    	} 
    });
    </script>
    <?php
    }
    add_action('wp_head', 'remove_bg');

    This code get’s called when the page loads. When the page is loads on mobile device it removes all background images for the #ID’s listed.
    It does not work if you re-size the browser.

    Let us know if you have any questions.

    Cheers!
    Vinay

    • This reply was modified 7 years, 6 months ago by Vinay.
    #683640

    That did not work. It works on desktop but the background picture still shows on mobile.

    • This reply was modified 7 years, 6 months ago by dirtdiggr.
    #684841

    Hi!

    What is the resolution of the device? Or the actual model? Increase the value of the viewport from 768 to 989 or 1024.

    Cheers!
    Ismael

    #685451

    Hi Ismael. Vinay’s code works for desktop (in safari and chrome on a macbook) but it does not work on an android (Samsung Galaxy S5 using Chrome).

    Try it out on desktop and then try it on a phone. The background is still there on a phone.

    #686709

    Hi!

    The screen resolution of the device is 1080 x 1920 pixels. We modified the code a bit. Please remove browser cache before testing the page.

    add_action('wp_footer', 'ava_custom_script');
    function ava_custom_script(){
    ?>
    <script type="text/javascript">
    (function($) {
    	function gh() {
    		var isMobile = '';
    
    		if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) && 'ontouchstart' in document.documentElement)
    		{
    			isMobile =  true;
    		}
    		else
    		{
    			isMobile =  false;
    		}
    
    		if (isMobile || $(window).width() < 1081) {
    			$("#splash").css("background-image", "");    
    			$("#casts").css("background-image", ""); 
    			$("#about").css("background-image", "");    		
    			$("#av_section_4").css("background-image", "");
    		} 
    	}
    
    	gh();
    })(jQuery);
    </script>
    <?php
    }

    Best regards,
    Ismael

    #686911

    Thanks Ismael but that has the same result. There’s still a background on mobile. Do you have a phone to check? Let me know if you need the login and password again.

    #687188

    Hi,

    The code works on my local installation, I will set up a demo for you on your site then we can easily replicate it to the other pages, please give us a bit more time.

    Best regards,
    Vinay

    #689643

    Thank you very much Vinay and Ismael for your guys’ help. I tried the code again and for some reason it worked! Thanks again guys.

    #690124

    Hi,

    Great, glad you got it working and thanks for the feedback :-)

    Please let us know if you should need any further help on the topic.

    Regards,
    Rikard

Viewing 20 posts - 1 through 20 (of 20 total)
  • You must be logged in to reply to this topic.