made some things single row

Author: Kyler-Chiago

mlflow-site/src/app/components/FeatureCard.tsx

@@ -1,7 +1,7 @@
 const FeatureCard = () => {
   return (
     <div className='featureCard'>
-      <div>FeatureCard1</div>
+      <div>FeatureCard1 hello how are you doing?</div>
       <div>FeatureCard2</div>
       <div>FeatureCard3</div>
       <div>FeatureCard4</div>

mlflow-site/src/app/components/TeamCard.tsx

@@ -16,7 +16,8 @@ const TeamCard: React.FC<TeamCardProps> = ({
 }) => {
   return (
     <div className='teamcard'>
-      <img src={imageNotFound} alt='Img not found'></img>
+      {/* <div style={{ backgroundImage: 'url(../../assets/imageNotFound.jpg)' }} className='teamCardImg'></div> */}
+      <img src={imageNotFound} alt='Miss'></img>
       <div>{name}</div>
       <div>
         <a href={github}>G </a>

mlflow-site/src/app/globals.css

@@ -43,6 +43,7 @@ body {
   display: grid;
   grid-template-columns: 1fr 360px 1fr;
   grid-template-rows: 1fr;
+  overflow-y: auto;
 }
 
 .mobileWrapper {
@@ -134,14 +135,17 @@ body {
   grid-row: 3;
   width: 100%;
   background-color: rgb(176, 47, 107);
+  display: grid;
+  place-items: center;
 }
 
 .featureCard {
   width: 100%;
   background-color: rgb(122, 144, 167);
   display: grid;
-  grid-template-columns: 50% 50%;
-  grid-template-rows: 50% 50%;
+  grid-template-columns: 100%;
+  grid-template-rows: min-content;
+  text-align: center;
 }
 
 .demo {
@@ -157,8 +161,8 @@ body {
 .demoSplit {
   width: 100%;
   display: grid;
-  grid-template-columns: 50% 50%;
-  grid-template-rows: 100%;
+  grid-template-columns: 100%;
+  grid-template-rows: min-content;
 }
 
 .teamCards {
@@ -175,4 +179,9 @@ body {
   flex-direction: column;
   justify-content: center;
   align-items: center;
+}
+
+.teamCardImg {
+  width: 50px;
+  height: 50px;
 }