fix: explore catalog mobile fixes (#322)

* fix: explore catalog mobile fixes * fix: PR request
openedx · Jun 28, 2023 · a90186a · a90186a
1 parent 2c57c2d
commit a90186a
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 8 deletions.
diff --git a/src/components/catalogModalBanner/CatalogCourseModalBanner.jsx b/src/components/catalogModalBanner/CatalogCourseModalBanner.jsx
@@ -45,7 +45,7 @@ const CatalogCourseModalBanner = ({
   upcomingRuns,
   execEd,
 }) => (
-  <div className="banner">
+  <div className="banner my-3">
     <div className="banner-section mx-3">
       <div className="banner h4 mb-0">
         <Icon className="mr-1" src={MoneyOutline} />

diff --git a/src/components/catalogs/styles/_enterprise_catalogs.scss b/src/components/catalogs/styles/_enterprise_catalogs.scss
@@ -24,11 +24,17 @@
   background-position: center;
   width: 1140px !important;
   height: 300px !important;
+  @media only screen and (max-width: map-get($grid-breakpoints, "md")) {
+    width: 800px !important;
+  }
+  @media only screen and (max-width: map-get($grid-breakpoints, "sm")) {
+    width: 500px !important;
+  }
 }
 
 .landing-page-download {
   float: right;
-  @media only screen and (max-width: 850px) {
+  @media only screen and (max-width: map-get($grid-breakpoints, "md")) {
     float: none !important;
   }
 }
@@ -42,8 +48,10 @@
 .partner-logo-thumbnail {
   position: absolute;
   z-index: 1;
-  left: 2%;
+  left: 25px;
+  top: 230px;
   max-height: 90px;
+  max-width: 200px;
   background-color: $light-300;
   box-shadow: $box-shadow;
 }
@@ -140,7 +148,7 @@
   min-height: 90px;
 }
 
-@media only screen and (max-width: 850px) {
+@media only screen and (max-width: map-get($grid-breakpoints, "md")) {
   .slash {
     display: none;
   }

diff --git a/src/components/programCard/ProgramCard.jsx b/src/components/programCard/ProgramCard.jsx
@@ -55,13 +55,13 @@ const ProgramCard = ({ intl, onClick, original }) => {
         }
       />
       <Card.Section className={classNames('flex-column justify-content-end')}>
-        <span className="d-block">
+        <span className="d-block align-middle">
           <Badge
             variant="light"
-            className={classNames('program d-inline-flex mb-2')}
+            className={classNames('d-inline-flex mb-2 align-items-center')}
           >
-            <Icon src={Program} className="badge-icon" />
-            <span className="badge-text"> {program_type} </span>
+            <Icon src={Program} />
+            <span> {program_type} </span>
           </Badge>
         </span>
         <p className="x-small mb-2 mt-2">