diff --git a/src/assets/scss/_gutenberg-support.scss b/src/assets/scss/_gutenberg-support.scss
index 7cd170a..b5cd8f4 100644
--- a/src/assets/scss/_gutenberg-support.scss
+++ b/src/assets/scss/_gutenberg-support.scss
@@ -2,11 +2,16 @@
     margin-left: calc(-8.3333333333vw + 15px) !important;
     margin-right: calc(-8.3333333333vw + 15px) !important;
 
-    @media only screen and (min-width: 1800px) {
+    // 1400px is the maximum the inner cointainer should get, so we 
+    // use 1526px - 1 column - 1 column;
+    @media only screen and (min-width: 1526px) {
         margin-left: calc(-1*(87.5vw - 1415px)/2) !important !important;
         margin-right: calc(-1*(87.5vw - 1415px)/2) !important !important;
     }
 }
+
+// 1400px is the maximum the inner cointainer should get, so we 
+// use 1526px - 1 column - 1 column;
 .wp-block-image.alignwide>img {
     max-width: 1400px !important;
     width: calc(100vw - 12.5vw) !important;
@@ -14,7 +19,7 @@
     left: 0px;
     position: relative;
 
-    @media only screen and (min-width: 1800px) {
+    @media only screen and (min-width: 1526px) {
         left: 30px;
     }
 }
diff --git a/src/assets/scss/_home-collection.scss b/src/assets/scss/_home-collection.scss
index c0d8231..1d30cf9 100644
--- a/src/assets/scss/_home-collection.scss
+++ b/src/assets/scss/_home-collection.scss
@@ -1,5 +1,7 @@
 .collection-header {
-    @media only screen and (min-width: 1800px) {
+    // 1400px is the maximum the inner cointainer should get, so we 
+    // use 1526px - 1 column - 1 column;
+    @media only screen and (min-width: 1526px) {
         overflow: inherit;
     }
 }
@@ -14,54 +16,60 @@
     }
 
     .t-collection--info-img, .image-placeholder {
-        width: 205px;
-        height: 205px;
-        max-width: 205px;
-        bottom: -6rem;
+        width: calc(16.6666666667% - 8px);
+        width: calc(16.6666666667vw - 8px);
+        height: calc(16.6666666667% - 8px);
+        height: calc(16.6666666667vw - 8px);
+        max-height: 215px;
+        max-width: 215px;
+        bottom: -111px; // 215px/2 + 4px 
         border-width: 4px !important;
-        margin-left: 4.16666666667%;
-        @media only screen and (max-width: 1024px){
-            width: 165px;
-            height: 165px;
-            max-width: 165px;
-            bottom: -4rem;
+
+        // Above this point, the container should not be larger
+        // 1400px is the maximum the inner cointainer should get, so we 
+        // use 1526px - 1 column - 1 column;
+        @media only screen and (max-width: 1526px) {
+            margin-left: 4.16666666667%;
+            margin-left: 4.16666666667vw;
         }
-        @media only screen and (max-width: 992px){
-            bottom: -4rem;
-            width: 123px;
-            height: 123px;
-            max-width: 123px;
+        // Above this point, the circle will reach it's maximum size
+        @media only screen and (max-width: 1290px) {
+            bottom: calc(-8.33% + 4px);
+            bottom: calc(-8.33vw + 4px);
         }
-        @media only screen and (max-width: 576px){
-            width: 95px;
-            height: 95px;
-            max-width: 95px;
-            bottom: -3rem;
+        // Mobile
+        @media only screen and (max-width: 767px){
+            width: calc(25% - 8px);
+            width: calc(25vw - 8px);
+            height: calc(25% - 8px);
+            height: calc(25vw - 8px);
+            max-width: calc(25% - 8px);
+            max-width: calc(25vw - 8px);
+            bottom: calc(-12.5% - 4px);
+            bottom: calc(-12.5vw - 4px);
         }
-        @media only screen and (max-width: 360px){
-            width: 95px;
-            height: 95px;
-            max-width: 95px;
-            bottom: -3rem;
+
+        h4 {
+            font-size: 2rem;
         }
     }
     .t-collection--info {
         padding-top: 6px;
-        margin-right: calc(4.16666666667% * 3);
-        .t-collection--col-3{
-            flex: 0 0 18% !important;
-            max-width: 18% !important;
-            @media only screen and (max-width: 576px){
-                flex: 0 0 29% !important;
-                max-width: 29% !important;
+        justify-content: space-between;
+
+        .t-collection--col-9 {
+            padding-left: calc(4.16666666667% + 15px) !important;
+            padding-left: calc(4.16666666667vw + 15px) !important;
+            padding-right: 12.5% !important;
+            padding-right: 12.5vw !important;
+
+            @media only screen and (max-width: 767px){
+                padding-left: 4.16666666667% !important;
+                padding-left: 4.16666666667vw !important;
+                padding-right: 8.33% !important;
+                padding-right: 8.33vw !important;
             }
-            @media only screen and (min-width: 1400px){
-                flex: 0 0 16% !important;
-                max-width: 16% !important;
-            }
-        }
-        .t-collection--col-9{
-            margin-left: 4.16666666667%;
+
             h2 {
                 white-space: nowrap;
                 overflow: hidden;
@@ -71,13 +79,13 @@
         .t-collection--info-title {
             font: {
                 size: 1.5rem;
-                weight: 700;
+                weight: 600;
             }
             margin-top: 0.4rem;
-            @media only screen and (max-width: 767px){
+            @media only screen and (max-width: 768px){
                 font: {
                     size: 1.125rem;
-                    weight: 500;
+                    weight: 600;
                 }
             }
         }
@@ -211,6 +219,14 @@
     height: 35px;
     left: 94.833333%;
     top: -2px;
+
+    // 1400px is the maximum the inner cointainer should get, so we 
+    // use 1526px - 1 column - 1 column;
+    @media only screen and (max-width: 1526px) {
+        margin-right: 4.16666666667%;
+        margin-right: 4.16666666667vw;
+    }
+
     @media only screen and (max-width: 576px) {
         left: 90.833333%;
     }
diff --git a/src/assets/scss/_media_query.scss b/src/assets/scss/_media_query.scss
index eaf37ad..88e9142 100644
--- a/src/assets/scss/_media_query.scss
+++ b/src/assets/scss/_media_query.scss
@@ -349,7 +349,9 @@ footer{
     }
 }
 
-@media only screen and (min-width: 1800px){
+// 1400px is the maximum the inner cointainer should get, so we 
+// use 1526px - 1 column - 1 column;
+@media only screen and (min-width: 1526px){
     .max-large{
         max-width: 1400px;
         margin-left: auto !important;
diff --git a/src/assets/scss/style.scss b/src/assets/scss/style.scss
index 2aaa35d..9163c0d 100644
--- a/src/assets/scss/style.scss
+++ b/src/assets/scss/style.scss
@@ -501,6 +501,7 @@ nav{
         }
     }
     &.collection-page{
+        height: 100%;
         height: 100vh;
     }
     &.page-404{
@@ -580,6 +581,8 @@ nav{
         padding: 1.5rem;
         padding-left: 4.166667%;
         padding-right: 4.166667%;
+        padding-left: 4.166667vw;
+        padding-right: 4.166667vw;
         max-width: 87.5vw;
         word-break: break-word;
         @media only screen and (min-width: 769px){
@@ -588,9 +591,12 @@ nav{
             padding: 0rem;
             padding-left: 4.166667%;
             padding-right: 4.166667%;
+            padding-left: 4.166667vw;
+            padding-right: 4.166667vw;
             &.singular-title{
                 padding: 1.5rem;
                 padding-left: 4.166667%;
+                padding-left: 4.166667vw;
             }
         }
         @media only screen and (max-width: 768px){
@@ -598,6 +604,8 @@ nav{
             padding-top: 1.2rem;
             padding-left: 4.166667%;
             padding-right: 4.166667%;
+            padding-left: 4.166667vw;
+            padding-right: 4.166667vw;
             max-height: 100px;
         }
         @media only screen and (max-width: 576px){
@@ -629,7 +637,7 @@ nav{
 
 .page-header__image {
     width: 100%;
-    min-height: 250px;
+    width: 100vw;
     margin: 0 auto;
     object-fit: cover;
     display: block;
@@ -637,8 +645,6 @@ nav{
 .page-header.page-header--image-full {
     height: auto;
     display: block;
-
-    .page-header__image { max-height: 400px; }
 }
 
 .tainacan-title{
@@ -674,6 +680,7 @@ nav{
 
 .margin-one-column{
     margin: 0 4.16666666667%;
+    margin: 0 4.16666666667vw;
 }
 .form-control{
     border-color: #e5e5e5;
@@ -686,15 +693,19 @@ nav{
     @media only screen and (max-width: 768px){
         margin-left: 8.33333333334% !important;
         margin-right: 8.33333333334% !important;
+        margin-left: 8.33333333334vw !important;
+        margin-right: 8.33333333334vw !important;
     }
 }
 
 .margin-one-column-left{
     margin-left: 4.16666666667%;
+    margin-left: 4.16666666667vw;
 }
 
 .margin-two-column{
     margin: 0 8.33333333334%;
+    margin: 0 8.33333333334vw;
 }
 
 .margin-three-column{
diff --git a/src/template-parts/header-social-share.php b/src/template-parts/header-social-share.php
index 60fee5d..0a22f9a 100644
--- a/src/template-parts/header-social-share.php
+++ b/src/template-parts/header-social-share.php
@@ -1,5 +1,5 @@
 <?php global $wp; ?>
-<div class="collection-header--share" style="margin-right: 4.16666666667%;">
+<div class="collection-header--share">
 	<div class="btn trigger">
 		<span class="mdi mdi-share-variant"></span>
 	</div>
diff --git a/src/template-parts/headercollection.php b/src/template-parts/headercollection.php
index 42b92b0..5da4972 100644
--- a/src/template-parts/headercollection.php
+++ b/src/template-parts/headercollection.php
@@ -47,7 +47,7 @@ echo '</style>';
 				</div>
 			<?php endif;
 			global $wp; ?>
-			<div class="collection-header--share" style="margin-right: 4.16666666667%;">
+			<div class="collection-header--share">
 				<div class="btn trigger">
 					<span class="mdi mdi-share-variant"></span>
 				</div>
@@ -74,10 +74,10 @@ echo '</style>';
 			</div>
 		</div>
 		<div class="row t-collection--info max-large margin-one-column" style="overflow-x: inherit;">
-			<div class="col-4 col-md-3 px-0 t-collection--col-3">
+			<div class="col-md-2 col-3 px-0">
 				
 			</div>
-			<div class="col-8 col-md-9 pl-0 t-collection--col-9 mt-md-3" style="z-index: 2">
+			<div class="col-md-10 col-9 pl-0 t-collection--col-9" style="z-index: 2">
 				<h2 class="t-collection--info-title text-white">
 					<?php tainacan_the_collection_name(); ?>
 				</h2>