diff --git a/ui (gen4)/features/ui-single-image.js b/ui (gen4)/features/ui-single-image.js
index a552b874..dffe5658 100755
--- a/ui (gen4)/features/ui-single-image.js	
+++ b/ui (gen4)/features/ui-single-image.js	
@@ -137,16 +137,44 @@ function updateImageProportions(){
 			if(Di == H){
 				images
 					.each(function(_, img){
-						img.style.width = n + 'px'
-						img.style.height = ''
+						var o = img.getAttribute('orientation')
+						o = o == null ? 0 : o
+
+						// rotated images...
+						if(o == 90 || o == 270){
+							img.style.width = ''
+							img.style.height = n + 'px'
+
+							img.style.margin = -(n - di)/2 +'px '+ (n - di)/2 +'px'
+
+						} else {
+							img.style.width = n + 'px'
+							img.style.height = ''
+
+							img.style.margin = ''
+						}
 					})
 
 			// vertical viewer...
 			} else {
 				images
 					.each(function(_, img){
-						img.style.width = ''
-						img.style.height = n + 'px'
+						var o = img.getAttribute('orientation')
+						o = o == null ? 0 : o
+
+						// rotated images...
+						if(o == 90 || o == 270){
+							img.style.width = n + 'px'
+							img.style.height = ''
+
+							img.style.margin = -(n - di)/2 +'px '+ (n - di)/2 +'px'
+
+						} else {
+							img.style.width = ''
+							img.style.height = n + 'px'
+
+							img.style.margin = ''
+						}
 					})
 			}
 		
@@ -166,6 +194,8 @@ function updateImageProportions(){
 				.each(function(_, img){
 					img.style.width = ''
 					img.style.height = ''
+
+					img.style.margin = ''
 				})
 
 			that.ribbons
@@ -226,10 +256,10 @@ module.SingleImageView = core.ImageGridFeatures.Feature({
 				if(this.toggleSingleImage('?') == 'on'){
 					updateImageProportions.call(this)
 
-					this.config['single-image-scale'] = this.screenwidth
+					this.config['single-image-scale'] = this.scale
 
 				} else {
-					this.config['ribbon-scale'] = this.screenwidth
+					this.config['ribbon-scale'] = this.scale
 				}
 			}],
 		// update new images...
@@ -243,7 +273,6 @@ module.SingleImageView = core.ImageGridFeatures.Feature({
 		// 		need to see if the state has changed and doing this with 
 		// 		two separate pre/post callbacks (toggler callbacks) is 
 		// 		harder than with two nested callbacks (action callbacks)
-		// XXX this uses .screenwidth for scale, is this the right way to go?
 		['toggleSingleImage.pre', 
 			function(){ 
 				var pre_state = this.toggleSingleImage('?')
@@ -257,9 +286,9 @@ module.SingleImageView = core.ImageGridFeatures.Feature({
 
 						// update scale...
 						if(state != pre_state){
-							var w = this.screenwidth
-							this.config['ribbon-scale'] = w
-							this.screenwidth = this.config['single-image-scale'] || w
+							var s = this.scale
+							this.config['ribbon-scale'] = s
+							this.scale = this.config['single-image-scale'] || s
 						}
 
 					// ribbon mode -- restore original image size...
@@ -268,17 +297,16 @@ module.SingleImageView = core.ImageGridFeatures.Feature({
 							.each(function(_, img){
 								img.style.width = ''
 								img.style.height = ''
+								img.style.margin = ''
 							})
 
-						// XXX this still does not align correctly with 
-						// 		rotated current image...
 						this.ribbons.centerImage()
 
 						// update scale...
 						if(state != pre_state){
-							var w = this.screenwidth
-							this.config['single-image-scale'] = w
-							this.screenwidth = this.config['ribbon-scale'] || w
+							var s = this.scale
+							this.config['single-image-scale'] = s
+							this.scale = this.config['ribbon-scale'] || s
 						}
 					}
 				}
@@ -307,11 +335,13 @@ module.SingleImageViewLocalStorage = core.ImageGridFeatures.Feature({
 					return
 				}
 
+				console.log('!!!!!!!!!!!!!!', this.config['ribbon-scale'])
+
 				if(this.toggleSingleImage('?') == 'on'){
-					this.screenwidth = this.config['single-image-scale'] || this.screenwidth
+					this.scale = this.config['single-image-scale'] || this.scale
 
 				} else {
-					this.screenwidth = this.config['ribbon-scale'] || this.screenwidth
+					this.scale = this.config['ribbon-scale'] || this.scale
 				}
 			}],
 	],
diff --git a/ui (gen4)/ribbons.js b/ui (gen4)/ribbons.js
index 064bcc61..29a8b665 100755
--- a/ui (gen4)/ribbons.js	
+++ b/ui (gen4)/ribbons.js	
@@ -2193,10 +2193,7 @@ var RibbonsPrototype = {
 						height: w,
 					})
 					image.css({
-						'margin-top': -((w - h)/2),
-						'margin-bottom': -((w - h)/2),
-						'margin-left': (w - h)/2,
-						'margin-right': (w - h)/2,
+						'margin': -((w - h)/2) +'px '+ (w - h)/2 + 'px'
 					})
 
 				} else if((o == 0 || o == 180) && image_p != viewer_p){
@@ -2216,6 +2213,8 @@ var RibbonsPrototype = {
 				})
 			}
 		})
+
+		return this
 	},
 
 	// center a ribbon vertically...