Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #638320

    I have a full width collage that is 2500 x 375 px and looks great on a big screen but doesn’t look good on a small screen. Can I swap the images out and put a different collage in on the mobile view?

    Thanks!

    #638405

    Hey connect4consulting,

    I’m not sure how you set it up? I’m assuming you are using a color section and set a background image to it. In that case to swap the image in mobile device Please try adding this at the very end of your themes / child themes functions.php file:

    Replace “background.jpg” with the correct path to the image.

    // Replace color section background
    function swap_img(){
    ?>
    <script>
    jQuery(document).load(function(){ 
    	if ($(window).width() < 768) {
    		jQuery("#bg-desktop-only").css("background-image", "background.jpg");    
    	} 
    });
    </script>
    <?php
    }
    add_action('wp_head', 'swap_img');

    Best regards,
    Vinay

    #638875

    Thanks – this is helpful.
    ONe more question.

    On mobile view – 1024 x 700 px, how can I get the main entry title to be centered vertically? Right now it’s slipping below the first color section.

    #638916

    Also will the background image swap solution above swap all images across the site? Suppose I just want this to work on a single page?

    #641670

    Hi,

    You can refer to this post – http://kriesi.at/documentation/enfold/hide-menu-itemselements-on-mobile/ to hide/display certain elements on certain devices.

    Can you please post the link to your page where we can see “main entry title” issue? Also, please post a screenshot and highlight the changes you would like to make.

    Best regards,
    Yigit

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