diff --git a/src/components/AddImages/AddImages.example.css b/src/components/AddImages/AddImages.example.css
index 1471a158..23a5d034 100644
--- a/src/components/AddImages/AddImages.example.css
+++ b/src/components/AddImages/AddImages.example.css
@@ -1,21 +1,23 @@
 .addImageWrapper {
   float: left;
-  width: 110px;
-  height: 110px;
-  margin: 5px;
-
-  &::after {
-    content: ".";
-    visibility: hidden;
-    display: block;
-    height: 0;
-    clear: both;
-  }
+  position: relative;
+  width: 100%;
+  margin: 5px 0;
+  overflow: hidden;
+}
+/* Firefox doesn't support image aspect ratio inside flexbox */
+.aspectRatioWrapper {
+  padding-bottom: 60%; /* 5:3 Aspect Ratio = 100% / (w / h) */
 }
 
 .addImage {
-  width: 110px;
-  height: 110px;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  width: 100%;
+  height: 100%;
   background-color: lightgrey;
   display: flex;
   justify-content: center;
diff --git a/src/components/AddImages/AddImages.example.js b/src/components/AddImages/AddImages.example.js
index 61c3373b..42f11092 100644
--- a/src/components/AddImages/AddImages.example.js
+++ b/src/components/AddImages/AddImages.example.js
@@ -63,14 +63,16 @@ class AddImagesTest extends Component {
       <div>
         <AddImages images={this.state.images} onSortEnd={this.onSortEnd}>
           <div className={css.addImageWrapper}>
-            <label className={css.addImage} htmlFor="addImageExampleInput">+ Add image</label>
-            <input
-              id="addImageExampleInput"
-              type="file"
-              accept="images/*"
-              onChange={this.onChange}
-              className={css.addImageInput}
-            />
+            <div className={css.aspectRatioWrapper}>
+              <label className={css.addImage} htmlFor="addImageExampleInput">+ Add image</label>
+              <input
+                id="addImageExampleInput"
+                type="file"
+                accept="images/*"
+                onChange={this.onChange}
+                className={css.addImageInput}
+              />
+            </div>
           </div>
         </AddImages>
       </div>
diff --git a/src/containers/EditListingPhotosForm/EditListingPhotosForm.css b/src/containers/EditListingPhotosForm/EditListingPhotosForm.css
index ea5cfeef..2b8a2f04 100644
--- a/src/containers/EditListingPhotosForm/EditListingPhotosForm.css
+++ b/src/containers/EditListingPhotosForm/EditListingPhotosForm.css
@@ -1,8 +1,9 @@
 .addImageWrapper {
   float: left;
-  width: 110px;
-  height: 110px;
-  margin: 5px;
+  position: relative;
+  width: 100%;
+  margin: 5px 0;
+  overflow: hidden;
 
   &::after {
     content: ".";
@@ -13,9 +14,19 @@
   }
 }
 
+/* Firefox doesn't support image aspect ratio inside flexbox */
+.aspectRatioWrapper {
+  padding-bottom: 60%; /* 5:3 Aspect Ratio = 100% / (w / h) */
+}
+
 .addImage {
-  width: 110px;
-  height: 110px;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  width: 100%;
+  height: 100%;
   background-color: lightgrey;
   display: flex;
   justify-content: center;
@@ -37,5 +48,5 @@
 }
 
 .submitButton {
-  margin-top: 1rem;
+  margin-top: 5rem;
 }
diff --git a/src/containers/EditListingPhotosForm/EditListingPhotosForm.js b/src/containers/EditListingPhotosForm/EditListingPhotosForm.js
index ceaac05b..d0c96a4f 100644
--- a/src/containers/EditListingPhotosForm/EditListingPhotosForm.js
+++ b/src/containers/EditListingPhotosForm/EditListingPhotosForm.js
@@ -25,8 +25,10 @@ const RenderAddImage = props => {
   const inputProps = { accept, id: name, name, onChange, type };
   return (
     <div className={css.addImageWrapper}>
-      <Input {...inputProps} className={css.addImageInput} />
-      <label htmlFor={name} className={css.addImage}>{label}</label>
+      <div className={css.aspectRatioWrapper}>
+        <Input {...inputProps} className={css.addImageInput} />
+        <label htmlFor={name} className={css.addImage}>{label}</label>
+      </div>
     </div>
   );
 };