From b7888a8ac539a869885d190faf6e1f7177f73fd8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mat=C3=ADas=20Ventura?= <mv@matiasventura.com>
Date: Wed, 7 Jun 2017 18:00:45 +0200
Subject: [PATCH] Rework it all again with percentages.

---
 blocks/library/image/style.scss       |  7 ++++---
 editor/modes/visual-editor/style.scss | 11 ++++-------
 2 files changed, 8 insertions(+), 10 deletions(-)

diff --git a/blocks/library/image/style.scss b/blocks/library/image/style.scss
index 53582c1b98ae3c..61eb9b720e7025 100644
--- a/blocks/library/image/style.scss
+++ b/blocks/library/image/style.scss
@@ -9,20 +9,21 @@
 	&[data-align="left"] {
 		float: left;
 		margin-right: $block-padding;
+		margin-left: calc( 50vw - 500px);
 	}
 
 	&[data-align="right"] {
 		float: right;
 		margin-left: $block-padding;
+		margin-right: calc( 50vw - 500px);
 	}
 
 	&[data-align="wide"] {
-		margin-left: -24%;
-		margin-right: -24%;
+		max-width: 1100px;
 	}
 
 	&[data-align="full"] {
-		grid-column: full;
+		max-width: 100%;
 		padding-left: 0;
 		padding-right: 0;
 		box-sizing: border-box;
diff --git a/editor/modes/visual-editor/style.scss b/editor/modes/visual-editor/style.scss
index dc0ebeca86ed09..3d9b56cc7115f7 100644
--- a/editor/modes/visual-editor/style.scss
+++ b/editor/modes/visual-editor/style.scss
@@ -1,6 +1,6 @@
 .editor-visual-editor {
 	margin: 0 auto;
-	padding: 50px 0;
+	padding: 50px 0;	// Floating up/down arrows invisible
 
 	&,
 	& p {
@@ -21,15 +21,12 @@
 .editor-visual-editor {
 	margin-left: auto;
 	margin-right: auto;
-	> div {
-		display: grid;
-		grid-gap: 20px;
-		grid-template-columns: [full-start] minmax(1em, 1fr) [content-start] minmax(0, 40em) [content-end] minmax(1em, 1fr) [full-end];
-	}
 }
 
 .editor-visual-editor__block {
-	grid-column: main;
+	margin-left: auto;
+	margin-right: auto;
+	max-width: $visual-editor-max-width;
 	position: relative;
 	padding: $block-padding;
 	transition: 0.2s border-color;