ATTENTION, PLEASE READ: New topic creation is disabled, as we have moved to a new support system. Your existing topics will remain, but for all new requests you will need to use the new system. Click here to go to the new support request form.

• Back to forum

  Posted in: Uplift
• October 5, 2016 at 2:03 pm #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.
  October 6, 2016 at 11:46 am #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,

  October 7, 2016 at 5:52 pm #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.

  October 7, 2016 at 6:03 pm #295274
  tystra

  Member

  Post count: 8

  This reply has been marked as private.
  October 10, 2016 at 6:45 pm #295589
  David Martin – Support

  Moderator

  Post count: 20834

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

  

  October 11, 2016 at 2:37 am #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.
  October 12, 2016 at 9:48 am #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.

  October 13, 2016 at 4:13 am #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

  October 14, 2016 at 11:02 am #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);
  }`

• Back to forum

  Posted in: Uplift