I adjusted the image and card size and put the overflow-x hidden in t…

…he packages and hotels pages
aline-borges · Oct 20, 2020 · 91d27b2 · 91d27b2
1 parent 8fc0ecc
commit 91d27b2
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 7 deletions.
diff --git a/src/app/components/hotel/hotel.component.scss b/src/app/components/hotel/hotel.component.scss
@@ -57,7 +57,7 @@ $black: #000000;
 #hotel-page {
   display: flex;
   flex-direction: column;
-  min-width: 100vw;
+  min-width: 100%;
   min-height: 100vh;
   background-size: cover;
   background-repeat: no-repeat;
@@ -714,6 +714,9 @@ $black: #000000;
   font-weight: 700;
   margin: 0.5rem 2.5rem;
   width: 30rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 
   @include for-tablet-portrait-up {
     width: 20rem;
@@ -727,6 +730,7 @@ $black: #000000;
 
 .hotel-amenities {
   display: flex;
+  min-height: 30px;
 
   @include for-tablet-portrait-up {
     display: none;
@@ -814,8 +818,7 @@ $black: #000000;
 
 .hotel-photo {
   width: 34rem;
-  height: auto;
-  max-height: fit-content;
+  max-height: 273px;
   border-radius: 6.0rem 6.0rem 0 6.0rem;
 
   @include for-tablet-portrait-up {

diff --git a/src/app/components/package/package.component.scss b/src/app/components/package/package.component.scss
@@ -57,7 +57,7 @@ $black: #000000;
 #package-page {
   display: flex;
   flex-direction: column;
-  min-width: 100vw;
+  min-width: 100%;
   min-height: 100vh;
   background-size: cover;
   background-repeat: no-repeat;
@@ -601,7 +601,7 @@ $black: #000000;
   display: flex;
   justify-content: space-between;
   align-items: center;
-  margin-top: 3.5rem;
+  margin-top: 5px;
   width: 52.1rem;
 
   @include for-tablet-portrait-up {
@@ -726,6 +726,9 @@ $black: #000000;
   font-weight: 700;
   margin: 0.5rem 2.5rem;
   width: 45rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 
   @include for-tablet-portrait-up {
     width: 30rem;
@@ -739,6 +742,7 @@ $black: #000000;
 
 .hotel-amenities {
   display: flex;
+  min-height: 30px;
 
   @include for-tablet-portrait-up {
     display: none;
@@ -826,8 +830,7 @@ $black: #000000;
 
 .hotel-photo {
   width: 34rem;
-  height: auto;
-  max-height: fit-content;
+  max-height: 273px;
   border-radius: 6.0rem 6.0rem 0 6.0rem;
 
   @include for-tablet-portrait-up {