diff --git a/index.html b/index.html
index 9d5f1ca..c933b22 100644
--- a/index.html
+++ b/index.html
@@ -37,7 +37,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 		new Uhr($('#uhr'), {
 			layout: 'de_CH',
 			theme: 'black',
-			status: 'on'
+			status: 'on',
+			width: '20em'
 		});
 	</script>
 </body>
diff --git a/uhr.css b/uhr.css
index 67a8e27..45c84e4 100644
--- a/uhr.css
+++ b/uhr.css
@@ -20,11 +20,8 @@ body {
 	font-family: 'Uhrenfont', sans-serif;
 }
 .uhr {
-	padding: 3em;
 	position: relative;
 	margin: 0;
-	width: 40em;
-	height: 40em;
 	transition: background-color 0.5s;
 }
 .uhr .reflection {
@@ -42,11 +39,12 @@ body {
 .uhr .letterarea {
 	display: block;
 	position: absolute;
-	top: 5em;
-	bottom: 5em;
-	left: 5em;
-	right: 5em;
+	top: 12%;
+	bottom: 12%;
+	left: 12%;
+	right: 12%;
 	overflow: hidden;
+	font-size: 200%;
 }
 .item {
 	transition: box-shadow 0.5s, text-shadow 0.5s, border-color 0.5s, color 0.5s;
@@ -64,20 +62,20 @@ body {
 	box-shadow: 0 0 0.2em #eee;
 }
 .dot1 {
-	top: 1.5em;
-	left: 1.5em;
+	top: 3.75%;
+	left: 3.75%;
 }
 .dot2 {
-	top: 1.5em;
-	right: 1.5em;
+	top: 3.75%;
+	right: 3.75%;
 }
 .dot3 {
-	bottom: 1.5em;
-	right: 1.5em;
+	bottom: 3.75%;
+	right: 3.75%;
 }
 .dot4 {
-	bottom: 1.5em;
-	left: 1.5em;
+	bottom: 3.75%;
+	left: 3.75%;
 }
 .letter {
 	height: 10%;
@@ -86,7 +84,6 @@ body {
 	margin: 0;
 	display: inline-block;
 	text-align: center;
-	font-size: 2.2em;
 	line-height: 160%;
 }
 .letter.active {
diff --git a/uhr.js b/uhr.js
index ab7c43b..80dbcff 100644
--- a/uhr.js
+++ b/uhr.js
@@ -141,20 +141,20 @@ Uhr.prototype.normalizeHour = function(hour) {
 	return hour;
 }
 Uhr.prototype.initHTMLElements = function(clockarea, presets) {
-	this.createHTMLElements(clockarea);
+	this.createHTMLElements(clockarea, presets.width);
 	var force = presets.force || false;
 	this.initToggleSwitch(presets.status, force);
 	this.initLayoutSwitch(presets.layout, force);
 	this.initThemeSwitch(presets.theme, force);
 }
-Uhr.prototype.createHTMLElements = function(clockarea) {
-	this.createClockarea(clockarea)
+Uhr.prototype.createHTMLElements = function(clockarea, width) {
+	this.createClockarea(clockarea, width)
 	this.letterarea = this.clockarea.find('.letterarea');
 	this.createToggleSwitch();
 	this.createLayoutSwitch();
 	this.createThemeSwitch();
 }
-Uhr.prototype.createClockarea = function(clockarea) {
+Uhr.prototype.createClockarea = function(clockarea, width) {
 	clockarea.addClass('uhr');
 	clockarea.empty();
 	clockarea.append('<span class="item dot dot1"></span>');
@@ -163,6 +163,14 @@ Uhr.prototype.createClockarea = function(clockarea) {
 	clockarea.append('<span class="item dot dot4"></span>');
 	clockarea.append('<div class="letterarea"></div>');
 	clockarea.append('<div class="reflection"></div>');
+	if(width == undefined) {
+		width = '100%';
+	}
+	clockarea.css('width', width);
+	var realWidth = clockarea.width()
+	clockarea.width(realWidth);
+	clockarea.height(realWidth);
+	clockarea.css('font-size', (realWidth / 40) + 'px');
 	this.clockarea = clockarea
 }
 Uhr.prototype.createToggleSwitch = function() {