Convert dimensions to rem, remove unnecessary media queries.

JuzerShakir · Dec 28, 2023 · cc1bcf6 · cc1bcf6
1 parent e4b449b
commit cc1bcf6
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 16 deletions.
diff --git a/app/assets/stylesheets/pages/_home.scss b/app/assets/stylesheets/pages/_home.scss
@@ -10,6 +10,16 @@
 	background-position: center;
 	padding: 2.5rem 8rem;
 
+	&__header-logo {
+		width: 14rem;
+		height: 5.5rem;
+
+		@media (min-width: 380px) {
+			width: 20rem;
+			height: 8rem;
+		}
+	}
+
 	&__body {
 		margin-top: 22rem;
 		letter-spacing: -0.05rem;
@@ -82,23 +92,13 @@
 @include media-breakpoint-down(xl) {
 	#home {
 		padding: 2.5rem 6rem;
-
-		&__header-logo {
-			width: 280px;
-			height: 120px;
-		}
 	}
 }
 
 // * 991.98px (lg)
 @include media-breakpoint-down(lg) {
 	#home {
 		padding: 2.2rem 5rem;
-
-		&__header-logo {
-			width: 250px;
-			height: 100px;
-		}
 	}
 }
 
@@ -113,10 +113,5 @@
 @include media-breakpoint-down(sm) {
 	#home {
 		padding: 1.5rem 2rem;
-
-		&__header-logo {
-			width: 230px;
-			height: 90px;
-		}
 	}
 }
diff --git a/app/views/pages/home.html.erb b/app/views/pages/home.html.erb
@@ -1,6 +1,6 @@
 <div id="home">
   <div id="home__header" class="text-center">
-    <%= image_tag("fmb-logo-full.png", width: "320", height: "130", alt: "FMB logo", id: "home__header-logo") %>
+    <%= image_tag("fmb-logo-full.png", alt: "FMB logo", id: "home__header-logo") %>
   </div>
 
   <div id="home__body">