Thanks to jeking for pointing me in the right direction, I think I got it figured-out.
For right or wrong, to get these two custom sideboxes to display correctly for all three modes (default, tablet, and mobile), here is what I did.
In responsive_default.css, I added these two lines in two places (to handle the two sets of media widths):
div#rewardpoints {display:none;visibility:hidden;}
div#shoppingcartwithrewards {display:none;visibility:hidden;}
In tablet.css, I added these two lines in two places (to handle the two orientations):
For orientation portrait,
div#rewardpoints {display:none;visibility:hidden;}
div#shoppingcartwithrewards {display:none;visibility:hidden;}
For orientation landscape,
div#rewardpoints {}
div#shoppingcartwithrewards {}
But here was the tricky one to figure out, for mobile, I had to add to jscript_responsive_framework.php:
For if ( $detect->isMobile() && !$detect->isTablet() || $_SESSION['layoutType'] == 'mobile' ),
$('#rewardpoints').css({ 'display': 'none', 'visibility': 'hidden' });
$('#shoppingcartwithrewards').css({ 'display': 'none', 'visibility': 'hidden' });
And for completeness, for else if ( $detect->isTablet() || $_SESSION['layoutType'] == 'tablet' ),
$('#rewardpoints').css({ });
$('#shoppingcartwithrewards').css({ });
Things seems to work the way I expect them to now
I hope someone else finds this helpful ?
Bookmarks