Hactoberfest- Making the (Learn more about React here Button) mobile …

src/components/Home/index.css

@@ -6,4 +6,27 @@
 
 .cards {
   margin: 3.5rem 0;
+}
+.grid-container {
+  display: grid;
+  grid-template-columns: auto auto auto auto;
+  gap: 10px;
+  justify-content: space-between;
+  align-items: center
+}
+.item1 {
+  grid-column: 1 / 4;
+
+}
+@media only screen and (max-width: 600px) {
+  .grid-container {
+    display: flex;
+    flex-direction: column;
+    justify-content:center;
+    align-items: center;
+  }
+  .item1 {
+    text-align: center;
+
+  }
 }

src/components/Home/index.jsx

@@ -1,34 +1,49 @@
-import React, { useEffect, useState } from 'react'
-import Repos from '../../repos.json'
-import './index.css'
-import RepoCard from '../../styled-components/RepoCard'
-import PrinmaryButton from '../../styled-components/Buttons/primary'
+import React, { useEffect, useState } from "react";
+import Repos from "../../repos.json";
+import "./index.css";
+import RepoCard from "../../styled-components/RepoCard";
+import PrinmaryButton from "../../styled-components/Buttons/primary";
 
 function Home() {
-  const [repos,setRepos] = useState([])
-
-  useEffect(() => {
-    if(Repos.repos){
-      setRepos(Repos.repos)  
-    }
-  }, [])
-
-  return (
-    <div>
-      Contribute now on any one of these and get your profile listed in the contributors section
-      <span style={{float:'right'}}>
-        <PrinmaryButton link={'https://reactjs.org/'} text={"Learn more about React here"} external={false}/>
-      </span>
-
-      <div className="cards text-center">
-        {
-          repos.map((repo)=>{
-            return <RepoCard key={repo.id} title={repo.title} body={repo.body} btnLink={repo.redirectTo} btnText={"Contribute"} />
-          })
-        }
-      </div>
-    </div>
-  )
+	const [repos, setRepos] = useState([]);
+
+	useEffect(() => {
+		if (Repos.repos) {
+			setRepos(Repos.repos);
+		}
+	}, []);
+
+	return (
+		<div>
+			<div className="grid-container">
+				<div className="item1">
+					Contribute now on any one of these and get your profile listed in the
+					contributors section
+				</div>
+				<div className="item2">
+					<PrinmaryButton
+						link={"https://reactjs.org/"}
+						text={"Learn more about React here"}
+						external={false}
+					/>
+				</div>
+			</div>
+
+			<div className="cards text-center">
+				{repos.map((repo) => {
+					return (
+						<RepoCard
+							key={repo.id}
+							title={repo.title}
+							body={repo.body}
+							btnLink={repo.redirectTo}
+							btnText={"Contribute"}
+						/>
+					);
+				})}
+			</div>
+		</div>
+	);
 }
 
-export default Home
+export default Home;