Resizing Upsell / Greybox overlay on small screens

Adding upsell items to a product.
Post Reply
norman
Site Admin
Posts: 1238
Joined: Sat Feb 07, 2004 9:55 pm

Resizing Upsell / Greybox overlay on small screens

Post by norman » Thu Mar 12, 2015 1:30 pm

This tweak is for Upsell / Greybox versions. Not needed for Upsell / FancBox versions.

If you want the Upsell / Greybox overlay to automatically fit to small screens, then do this:

Go to Design / Library / Layouts / Upsell Items / Upsell Setup Code.
Around line 32 is a line:

if ( v11canshow() ) GB_show(caption, url, height, width);

Immediately above it add a line:

Code: Select all

	if ( width > $(window).width() ) width = $(window).width() - 40;
This will allow your original width to apply on wide screens and force the width to be 40pixels less (allows room for scrollbars, etc) on skinny screens.

You could add a similar line for height (although this may not be needed as a vertical scrollbar will appear to allow all the content to be accessed):

Code: Select all

	if ( height > $(window).height() ) height = $(window).height() - 40;
A slight quirk is that the centering isn't great on small screens. Unfortunately I don't know how to fix that.
Norman

Post Reply