diff --git a/data/gui/screens/soccer_setup.stkgui b/data/gui/screens/soccer_setup.stkgui
index 777fbdacd..fcac3ce37 100644
--- a/data/gui/screens/soccer_setup.stkgui
+++ b/data/gui/screens/soccer_setup.stkgui
@@ -9,34 +9,34 @@
 
         <header width="80%" text="Race Setup" align="center" text_align="center" />
 
-        <spacer height="10" width="25"/>
+        <spacer height="1%" width="25"/>
 
-        <div layout="horizontal-row" width="fit" height="fit" align="left">
-            <bright proportion="1" height="100%"
+        <div layout="horizontal-row" width="100%" height="fit" align="left">
+            <bright width="fit" height="100%"
                     I18N="In soccer setup screen" text="Number of goals to win" text_align="left" />
-            <spacer width="10" height="25"/>
-            <spinner id="goalamount" width="200" min_value="1" max_value="10"/>
+            <spacer width="2%" height="25"/>
+            <spinner id="goalamount" width="15%" min_value="1" max_value="10"/>
         </div>
 
-        <div layout="horizontal-row" width="fit" height="fit" align="left">
-            <bright proportion="1" height="100%"
+        <div layout="horizontal-row" width="100%" height="fit" align="left">
+            <bright width="fit" height="100%"
                     I18N="In soccer setup screen" text="Maximum time (min.)" text_align="left" />
-            <spacer width="10" height ="25"/>
-            <spinner id="timeamount" width="200" min_value="1" max_value="15"/>
+            <spacer width="2%" height="25"/>
+            <spinner id="timeamount" width="15%" min_value="1" max_value="15"/>
         </div>
 
-        <div layout="horizontal-row" width="fit" height="fit" align="left">
-            <bright proportion="1" height="100%"
+        <div layout="horizontal-row" width="100%" height="fit" align="left">
+            <bright width="fit" height="100%"
                     I18N="In soccer setup screen" text="Game type (Goals limit / Time limit)" text_align="left" />
-            <spacer width="10" height="25"/>
+            <spacer width="2%" height="25"/>
             <checkbox id="time_enabled"/>
         </div>
 
-        <spacer height="10" width="25"/>
+        <spacer height="1%" width="25"/>
 
         <bubble height="fit" width="100%" id="lblLeftRight" I18N="In soccer setup screen" text="Use left/right to choose your team and press fire" word_wrap="true" text_align="center"/>
 
-        <spacer height="10" width="25"/>
+        <spacer height="1%" width="25"/>
 
         <div id="central_div" layout="horizontal-row" width="100%" proportion="1" align="center">
             <roundedbox width="100%" layout="horizontal-row" height="100%">
@@ -44,7 +44,7 @@
             </roundedbox>
         </div>
 
-        <spacer height="10" width="25"/>
+        <spacer height="1%" width="25"/>
 
         <button id="continue" I18N="In soccer setup screen" text="Continue" align="center" width="60%"/>
     </div>