New Landing How can we help? Themeforest Theme Support Uplift Make product feature image full screen height in all browser sizes

Viewing 9 posts - 1 through 9 (of 9 total)
  • Posted in: Uplift
  • #294508
    tystra
    Member
    Post count: 8

    Hi there, I am using the full screen split for some products on my site, however I need the main product image to load and display at full screen height, regardless of the screen size. Currently, when it’s loaded on some screen sizes, it is loading more than the screen height and the bottom is chopped off (see this page for example and use screen resolution of 1440×900 or less: http://woocommerce-26187-56759-150898.cloudwaysapps.com/product/clearview-black-reef-blush/). Also, see screenshot for reference.

    How can I make it so that it’s loaded properly on all screen sizes?

    Thanks for any help.

    Attachments:
    You must be logged in to view attached files.
    #294780
    missjoya
    Member
    Post count: 17

    Yes – I’m struggling with this issue as well!!
    Woocommerce / settings / products / display setting don’t seem to work in uplift theme.
    Thanks,

    #295271
    David Martin – Support
    Moderator
    Post count: 20834

    @tystra – could you add your FTP details for me. I’ll see if I can adjust the JS to help you.

    #295274
    tystra
    Member
    Post count: 8
    This reply has been marked as private.
    #295589
    David Martin – Support
    Moderator
    Post count: 20834

    Can you please re-test now and report your findings.

    #295634
    tystra
    Member
    Post count: 8

    Hi there, thanks but it still does not show properly on smaller screens. That screenshot you send looks like much higher resolution than the 1440×900. On my regular resolution (MacBook Pro retina), it looks similar to yours, but that’s because the screen is much bigger. I took a screenshot from using Google Developer tools in Safari and this is what it looks like when loaded on smaller resolutions (see attached images). So it is still not loading to the height of the screen. Anything else to try and make this work?

    Thanks for your efforts.

    Attachments:
    You must be logged in to view attached files.
    #295909
    David Martin – Support
    Moderator
    Post count: 20834

    Have you changed server paths/folders? My changes to functions.js are not being reflected on the live site even with the Performance Mode => Off.

    Thanks.

    #296145
    tystra
    Member
    Post count: 8

    Hi there, the paths and folders have not changed. The only thing we did was add our real domain to the site (https://www.tiwitrade.com) but the paths on server are the same. We also do use Cloudflare but I have cleared all caches and paused it for now.

    Can we try again?

    Thanks

    #296458
    David Martin – Support
    Moderator
    Post count: 20834

    Yes, please keep Cloudflare disabled.

    Can you please test now I have made a couple more adjustments. Within js/functions.js

    Locate:

    			if ( body.hasClass('product-fw-split') ) {
    				productSliderThumbsPos = "left";
    				sliderVertHeight = 1000;
    			}

    Change to:

    			if ( body.hasClass('product-fw-split') ) {
    				productSliderThumbsPos = "left";
    				sliderVertHeight = windowHeight - 90;
    			}

    Locate

    			if ( sliderHeight > windowHeight ) {
    				productMain.css('height', sliderHeight);
    			} else {
    				productMain.css('height', windowHeight);
    			}

    Change to:

    `if ( sliderHeight > windowHeight ) {
    productMain.css(‘height’, windowHeight);
    slider.css(‘height’, windowHeight);
    } else {
    productMain.css(‘height’, windowHeight);
    slider.css(‘height’, windowHeight);
    }`

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

You must be logged in and have valid license to reply to this topic.

License required for one of the following items
Login and Registration Log in · Register