Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #412074

    Hello
    Have updated to the new version this morning. Loving all the new features.

    So far I am having a couple of problems with a new site (not yet live):

    1. I have three large sections on the home page.
    The full size (stretch to fit) image is only working in the top section on mobile.
    In the 2 lower sections (Eagle and Dog). The eagle is cropping halfway down the section. And the dog is not showing up at all.
    (I am testing on a non-retimna iPad and an iPhone 6 – this behaviour is happening on both – seems fine on desktop).

    2. The buttons are not ‘clickable’ on the iPad version. including the new animated down arrow. Tried to click on them but nothing happens.
    Again – works fine on desktop.

    Hope you can help, thanks.

    #412766

    Hey christopherheath!

    Thank you for using Enfold.

    1.) Since you’re using large background images, I think we’ll both agree that they won’t fit on mobile device or will not look exactly the same as they do in desktop view. What you can do is to adjust the image focus, on the eagle for example, you can focus on the head or eyes. Edit the color sections then add a unique ID attribute to the Section ID field. Let’s start with the eagle section, use “eagle-section” for example. Adjust the background position using this on Quick CSS field:

    @media only screen and (max-width: 767px) {
    #eagle-section .av_parallax {
    background-position: 30% 50% !important;
    }}

    Use different css media queries for different screen sizes.

    2.) You have to double tap the buttons on mobile devices because they have a hover state. If you don’t want that behaviour, toggle the Icon Visibility.

    Best regards,
    Ismael

    #412864

    Hello,
    Thank you for the reply.

    Your solution to No. 1 doesn’t seem to have helped.

    The issue isn’t the focus of the images in the bottom 2 sections – it is the fact that the eagle image is stopping halfway down the section (the background colour of the section takes over). And in the 3rd section (the dog) the image is not showing up AT ALL – i.e. only the background colour is showing up. I have changed the background sections of each to bright PINK to illustrate my point.
    I understand the focus of each image is going to vary on each device – but surely a section set to ‘stretch to fit’ should at least fill each section without showing any background colour. I’m sure it behaved this way before the 3.2 update.

    Also – When I change to non parallax this issue goes away. (The images fill the sections). But I obviously lose the parallax effect on desktops – which I would like to keep.

    #413344

    Hi!

    Alright. I didn’t notice the background colour right away. Add this to the functions.php file:

    add_action('wp_footer', 'ava_auto_resize');
    function ava_auto_resize(){
    ?>
    <script>
    (function($){	
    	$(window).on("resize", function (event) {
    		if (event.originalEvent === undefined) {
    			var alien = 'alien';
    			console.log(alien);
    		} else {
    			var human = 'human';
    			console.log(human);
    		}
    	}).resize();
    })(jQuery);
    </script>
    <?php
    }

    Remove browser cache then reload the page. You can try the suggestion above to adjust the background position.

    Regards,
    Ismael

    #414507

    hi….
    your function works fine for Tablet, etc…..but not for iPhone….. the parallax images are still not shown there!?

    thx for help,
    Stefan

    Update: All good now……also works on iPhones…

    best!
    Stefan

    • This reply was modified 4 years, 2 months ago by  Commodus76.
    #415109

    Hey!

    Glad we could help. :)

    Best regards,
    Ismael

Viewing 6 posts - 1 through 6 (of 6 total)

The topic ‘Couple of problems with 3.1 update.’ is closed to new replies.