Make product feature image full screen height in all browser sizes

[tystra]

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.

[missjoya]

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

[David Martin – Support]

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

[tystra]

This reply has been marked as private.

[David Martin – Support]

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

[tystra]

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.

[David Martin – Support]

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.

[tystra]

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

[David Martin – Support]

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);
}`